My website includes a flex slider with a carousel, but it seems that I did not configure the properties of the slider correctly (or it could be a CSS issue) as shown here: . The last image in the carousel is only partially visible.
While I am able to click on it, ideally I would like it to look like this: , with next/previous buttons always visible and displaying 4 full images. The 5th image should be on the next slide.
Below is the HTML code:
<div class="slider">
<div class="flexslider" id="slider">
<ul class="slides">
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image5.jpg" /></li>
</ul>
</div>
<!--flexslider-->
<div class="flexslider" id="carousel">
<ul class="slides">
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image5.jpg" /></li>
</ul>
</div>
<!--flexslider-->
</div>
The jQuery code used is:
$('.flexslider').each(function() {
var $root = $(this);
// Remove item if no image is found
$root.find("li").each(function(){
var src = $(this).find("img").attr("src");
if(!src){
$(this).remove();
}
});
});
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 91,
itemMargin: 19,
asNavFor: '#slider',
minItems: 4
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
}
I have created a demo page for reference:
Any suggestions? Cheers.