Flexslider infinite loop is not working

Question

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

Answer 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.