Flexslider infinite loop is not working

问题

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

回答1:

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.

回答2:

if you remove string

itemWidth: 234,

animationLoop will be work

回答3:

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