Slick.js 自动播放轮播弹回最后一张幻灯片，然后弹回正确的幻灯片

Question

我在我的 .Net 站点中使用 slick.js 带自动播放配置的轮播。在最后一张幻灯片上，它会跳到上一张幻灯片大约一秒钟。然后，它会弹回正确的幻灯片。

先决条件： 根据 Slick.js 和本网站中的其他问答

，所有文件和库都包含在应有的位置

检查的内容：

删除/更改自动播放速度
加点
增加/减少幻灯片数量
在移动网站上实施（效果很好）
将无穷大设置为真（无论如何都是默认值）
删除 onerror 函数
更改 "homeCarousel" class 名称

结果： 仅当 autoplaySpeed 较短时 (1000) - 它前后弹跳，没有明显的系统化

标记：

<div class="homeCarousel"> 
    <div> 
    <a href="/Article/QA%20Article%20friendly%20name%20">
<img alt="First image Main Ban\dsvfner " data-alt-source="homepage/fbBg.jpg?v=0" onerror="javascript:common.imageLink.replaceSourceOnError()" src="http://az742468.vo.msecnd.net/images/homepage/fbBg.jpg?v=0">
</img>
</a> 

    </div> 
    <div> 
    <a href="/Article/UFO%20Kfir"><img alt="Third image Main Banner " src="http://az742468.vo.msecnd.net/images/homepage/Kids_main_mnn_MNN.jpg?v=0">
</img>
</a> 

    </div> 
    <div> 
    <a href="/Article/acdascd"><img alt="Fifth image Main Banner " src="http://az742468.vo.msecnd.net/images/homepage/Fathers_day_2015_main_mnn1.jpg?v=0">
</img>
</a> 
    </div> 
    </div>

JS（在另一个文件中，捆绑）：

   $(document).ready(function() {
        homeCarousel.init();
    });

    homeCarousel.init = function () {
        if ($('.homeCarousel')) {
            $('.homeCarousel').slick({
                slidesToShow: 1,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 2500,
                infinite: true,
                pauseOnHover: true
            });
        }
    };

Answer 1

如果您在 slick 元素上设置过渡，则可能会发生这种情况，因此当 slick 尝试显示正确的幻灯片时，您的过渡集会干扰。

我会寻找与 slick

无关的 "transition: XXs"

Answer 2

问题是 css class 选择器捕获所有转换 (*)。使它更具体修复它。

Slick.js 自动播放轮播弹回最后一张幻灯片，然后弹回正确的幻灯片

Slick.js autoplay carousel bounces the last slide, then bounces back to the correct slide

.net

jquery

carousel

slick.js