Jquery Bxslider滑块不'；不要按顺序装入幻灯片

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

JSFIDDLE:

<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>

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

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>

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

---

这是bxslider中的一个已知错误。问题是滑块是从第一个克隆开始的。如果禁用无限循环，您将看到它工作正常（infiniteLoop:false），但由于您具有auto:true，我相信您确实需要循环效果。无论如何，如果有什么东西适合您，请查看此链接：

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

编辑：顺便问一下，在做上述任何事情之前，你能检查一下这把小提琴吗

---

似乎默认的css在bx克隆中有缺陷…

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

---

我刚刚改变了javascript的位置，它开始正常工作。脚本出现在document.ready的顶部，元素出现在底部，这些元素在运行时创建了一些动态元素，导致功能混乱，从而创建并创建了问题<代码>现在，当我将所有脚本放到页面底部时，所有内容都已设置好

使用css:false删除硬件加速并使用普通jquery动画，该动画不如css3动画平滑。它因为某种原因断裂了。这是它的工作方式。是的，它会删除它并使用jquery动画，您能再次检查jquery是否按预期加载吗？编辑：我现在看到了上面的编辑