Flexslider starting at last slide when using animation: "slide"

Question

I have an issue where my flexslider is starting at the last slide instead of the first, even though the controls start at the first.

HTML/JS is very simple:

<section id="section-1">
<script>
    $(function (){
        $('#section-1 .flexslider').flexslider(
            {
                animation: "slide",
                directionNav: false,
                controlsContainer: "#controls-1",
                pauseOnAction: false,
            }
        );
    });
</script>
<div class="container" id="controls-1">
</div>
<div class="flexslider">
    <ul class="slides">
    <li>
            <img src="2014/07/PEP_Intro.03.jpg" alt="" />  
    </li>

    <li>
            <img src="2014/07/PEP_Intro.02.jpg" alt="" />  
    </li>

    <li>
            <img src="2014/07/PEP_Intro.011.jpg" alt="" />  
    </li>

    </ul>
</div>

URL is here:

http://54.79.96.139/pepper/

Has anyone had this issue before? Weirdly when I change back to the "fade" animation the issue goes away.

score 1 · Answer 1 · edited May 23 '17 at 10:33

Had the same problem myself, 2 possible solutions:

In your flexslider options set the following:
```
animationLoop: false
```

Remove a couple of lines from the flexslider.js file (this option enables you to still loop your slider):

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

Source

Flexslider starting at last slide when using animation: "slide"

1 Answers1