Cody Eakins Cody Eakins - 1 year ago 339
Javascript Question

Using flexslider to create a responsive, full width, fixed-height, carousel image-slider


I'm trying to create a full width, fixed-height, carousel image-slider for the home page of a website that I'm working on.

That is, where the images are scaled to a fixed-height (matching the carousel height (the width doesn't matter)) which scales responsively as the page itself does.
However, I want my slider to be of lighter weight/ greater simplicity.

Here is my code thus far on the "LotW Adventures Page":

(here is the head)

<!-- Flex Slider API JS -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src=""></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
animation: "slide",
animationLoop: false,
itemWidth: 360,
itemMargin: 5,
minItems: 2,
maxItems: 4
<!-- End of FlexsliderAPI JS -->

Here is the body:

<!-- Placement of Flex Slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<img src="../../local/images/slide1.JPG" />
<img src="../../local/images/slide2.JPG"/>
<img src="../../local/images/slide3.JPG" />
<img src="../../local/images/slide 5.jpg" />
<!-- End placement of FlexSlider -->

And here is the CSS:

.flex-container {
width: 100%;
height: 300px;
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
.flex-container li {
list-style: outside none none;
display: inline;
.flexslider .slides img {
width: inherit;
max-height: inherit;

Thanks a ton for the help. - Cody

Answer Source

not snapping to height bounds

I don't see anything in flexslider that does anything with the height. Make sure all the elements are the same height, either by creating similarly sized thumbnails or enforcing a height with CSS. You might need to remove the itemWidth configuration to avoid stretching.

not displaying navigation

Your HTML is missing the navigation elements. I think you need to configure it; pass the navigation options:

controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next", 

The configuration offercard uses is:

prevText:"&lt; PREV",
nextText:"NEXT &gt;",
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download