Question

此处滑块与控件的确切滑块不匹配。它随机加载。请检查下面的小提琴。

的jsfiddle：

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中的已知错误。问题是您的滑块是从第一个克隆开始的。如果你禁用无限循环，你会看到它正常工作，（infiniteLoop：false）但是因为你有auto：true我相信你真的需要循环效果。无论如何，如果有什么东西适合你，请看这个链接：https://github.com/stevenwanderski/bxslider-4/issues/154

还有4.1.2版本我认为值得一试（你在小提琴中有4.1.1）。

编辑：BTW你可以在做上述任何其他事情之前检查这个小提琴吗？

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

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

似乎默认的css是错误的bx-clones ...

Answer 2

我不会称之为解决方案，而是一种解决方法。

我刚改变了javascript的位置，它开始正常工作。脚本存在于文档的顶部.ready和底部的元素创建和创建问题，因为一些动态元素在运行时创建，这搞乱了功能。 now when I brought all my scripts to the bottom of the page everything got set。

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

2 个答案: