I was looking all over the web there is a very known issue with Flexslider either with the slider or the carousel when it gets to the last item in the slider it flys back to the first one instead of keeping the infinite loop smoothly I can't believe no one has a solution for that this is the flexSlider code I am using:
$(document).ready(function() {
$(window).load(function() {
$('#carousel-two').flexslider({
animation : "slide",
controlNav : false,
animationLoop : true,
slideshow : true,
itemWidth : 234,
itemMargin : 20,
minItems : 3,
maxItems : 5
//asNavFor : '.flexslider'
});
});
});
No matter what I do it doesn't work. when it gets to the last item it doesn't keep the animation smoothly with infinite loop. does anyone have a solution?
Thanks
Here is how to do it while keeping the itemWidth
property:
jQuery('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
minItems: 4,
maxItems: 6,
itemWidth: 210,
itemMargin:5,
controlNav: false,
end : function(slider){
jQuery('.flexslider .slides li').each(function(){
slider.addSlide('<li>'+jQuery(this).context.innerHTML+'</li>', slider.count);
jQuery('.flexslider .slides').append('<li>'+jQuery(this).context.innerHTML+'</li>');
});
}
});
The main thing is to use the jQuery function in the end:
property. I think animationLoop
also needs to be set to false
. This allows for an infinite loop carousel. Here is where I found this.
if you remove string
itemWidth: 234,
animationLoop will be work
At least one thing set wrong is you have
animationLoop: false,
it should be:
animationLoop: true,
来源:https://stackoverflow.com/questions/25912634/flexslider-infinite-loop-is-not-working