Bxslider slider doesn't load the slides in order

Question

here slider doesn't match the exact slider with controls. and it loads randomly. please check the fiddle below.

JSFIDDLE:

http://jsfiddle.net/Q5W3Q/

HTML:

<div class="callout">
    <div class="callout_slider">
        <div class="slide">
            <h3>Test Everywhere White Paper slide1</h3>
            <p>Learn all about our strategic vision for the future of the media and entertainment industry.</p>
            <a href="#" target="_blank" class="btn">Download now</a>
        </div>
        <div class="slide">
            <h3>Behind the Scenes with <em>Gravity slide2</em></h3>
            <p>Discover how the Gravity audio and video post teams used Test workflows to transport audiences to a heightened reality. </p>
            <a href="#" target="_blank" class="btn">Watch now</a>
        </div>
        <div class="slide">
            <h3><em>The Hunger Games: Catching Fire slide3</em></h3>
            <p>See how one of Hollywood’s top editing pros used Media Composer | Software to edit the blockbuster film.</p>
            <a href="#" target="_blank" class="btn">Watch now</a>
        </div>
    </div>
</div>

JQUERY:

if ($('.callout_slider').length) {
    $('.callout_slider').bxSlider({
        controls: false,
        auto: true
    });
}

Answer 1

I won't call it a solution, but a work around.

I just changed the position of javascript and it started working fine. Scripts were present at the top inside document.ready and elements at bottom that created and created the issue as some dynamic elements get created on runtime which messed up the functionality. now when I brought all my scripts to the bottom of the page everything got set.

Answer 2

This is a known bug in bxslider. The problem is that your slider is starting with the first clone. If you disable infinite loop you will see that it works correctly, (infiniteLoop:false) but since you have auto:true I believe you really need the loop effect. Anyway see this link if something works for you: https://github.com/stevenwanderski/bxslider-4/issues/154

Also there is a 4.1.2 version I believe it worths a try (you had 4.1.1 in Fiddle).

Edit: BTW can you check this fiddle before doing anything else stated above?

http://jsfiddle.net/Q5W3Q/1/

if ($('.callout_slider').length) {      
        $('.callout_slider').bxSlider({
            controls: false,
            auto: true,
            slideWidth:500,
            startSlide:0,
            useCSS:false
        });
    }

It seems the default css is buggy with bx-clones...