Flexslider - animation: “slide”, animationLoop: “true” - Conflict

Question

I have an issue with Flexslider 2 under some specific circumstances. I'm using it as a content slider. What I need is to have the animation SLIDE rather than fade, and loop the slides. I have 3 slides with div content and more lists inside them to show a gallery type setup. The issue I'm running into is that when I set the options I need, the slider shows the last slide first, then slides on to slide 2, then 3, then 1. It won't show the first slide as the first slide. The startAt parameter has no effect.

Everything works perfectly when I set the slider to use the following:

$(".flexslider").flexslider({
    animation: "slide",
    animationLoop: false
});

It also works if I set it to:

$(".flexslider").flexslider({
    animation: "fade",
    animationLoop: true
});

But if I set animation to slide, and loop to true, it shows the last slide first again and won't show the slides in the correct order. Is there anything I can do about this? Seems to be a conflict between animation slide and looping.

I need the following code to work, but it doesn't:

$(".flexslider").flexslider({
    animation: "slide",
    animationLoop: true
});

Not getting any console errors. Any ideas?

Answer 1

remove these lines from the jquery.

methods.uniqueID( slider.slides.first().clone().addClass('clone') ).appendTo( slider.container ); methods.uniqueID( slider.slides.last().clone().addClass('clone') ).prependTo( slider.container ); }

This will fix the issue.

Answer 2

Could be lack of html code. I need the following code to work

    $(window).load(function(){
       $('.flexslider').flexslider({
          animation: "slide",
          animationLoop: true,
          start: function(slider){
         }
       });
    });