Bx滑块滑块不按顺序加载幻灯片

Question

这里的滑块不匹配带有控件的滑块。它是随机加载的。请检查下面的小提琴

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

这是bxslider中一个已知的bug。问题是你的滑块是从第一个克隆开始的。如果你禁用无限循环，你会看到它正常工作，(infinitelloop:false)，但因为你有auto:true，我相信你真的需要循环效果。不管怎样，看看这个链接，如果有适合你的:https://github.com/stevenwanderski/bxslider-4/issues/154

还有一个4.1.2版本，我相信它值得一试(你在Fiddle中有4.1.1)。

编辑:顺便说一句，在做上面所说的任何事情之前，你能检查一下这个小提琴吗?

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

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

似乎默认的css是bug与bx-克隆…

Answer 2

我不称之为解决方案，而是一种变通。

我只是改变了javascript的位置，它开始工作良好。脚本出现在内部文档的顶部。Ready和底部的元素产生了这个问题因为一些动态元素在运行时产生，这扰乱了功能。now when I brought all my scripts to the bottom of the page everything got set .