Cody Eakins Cody Eakins - 2 months ago 29
Javascript Question

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

everyone.

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)

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


Here is the body:

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


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

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:

slideshowSpeed:7000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:2000,
prevText:"&lt; PREV",
nextText:"NEXT &gt;",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0