从最后一项转到第一项时，圆滑的轮播中心 class 不工作

Question

我正在尝试使用 Slick carousel jquery 插件制作（无限）图片轮播，其中所有图片的不透明度都设置为 0.5，除了当前位于中心的那张应该设置到 1.0，转换时间为 1 秒

我做了以下代码：

HTML:

<div id="pics">
            <div class="img">
                <div class="img_overlay">
                    <img src="https://bloximages.chicago2.vip.townnews.com/billingsgazette.com/content/tncms/assets/v3/editorial/c/a5/ca5baefc-d922-54e1-9429-abd16a353bce/59cced6868919.image.jpg"/>
                </div>
            </div>
            <div class="img">
                <div class="img_overlay">
                    <img src="https://bloximages.chicago2.vip.townnews.com/billingsgazette.com/content/tncms/assets/v3/editorial/c/a5/ca5baefc-d922-54e1-9429-abd16a353bce/59cced6868919.image.jpg"/>
                </div>
            </div> 
            <div class="img">
                <div class="img_overlay">
                    <img src="https://bloximages.chicago2.vip.townnews.com/billingsgazette.com/content/tncms/assets/v3/editorial/c/a5/ca5baefc-d922-54e1-9429-abd16a353bce/59cced6868919.image.jpg"/>
                </div>
            </div>
</div>

CSS:

    *, html{
        margin: 0;
        padding: 0;
    }
    #pics{
        width: 100%;
        height: 500px;
        background-color: #282828;
        white-space: nowrap;
        overflow: hidden;
    }
    #pics .img{
      display: inline-block;
      height: 500px;
      width: auto;
    }
    .img_overlay{
        opacity: 0.5;
        transition: 1s;
    }
    #pics .slick-dots{
        position: relative;
        bottom: 0;
        top: -50px;
        z-index: 100;
    }
    .slick-center .img_overlay{
        opacity: 1;
        transition: 1s;
    }
    #pics .img img{
        height: 500px;
        width: auto;
    }
    #pics .slick-prev, #billeder .slick-next{
        display: none !important;
    }

JS:

    $(document).ready(function () {
        $('#pics').slick({
            dots: false,
            infinite: true,
            speed: 1400,
            centerMode: true,
            variableWidth: true,
            autoplay: true,
            autoplaySpeed: 1500,
            arrows: false
        });
    });

JSfiddle：https://jsfiddle.net/jgfrs331/5/

这很好用，除非它从最后一张图片转到下一张图片（下一张图片实际上是再次显示的第一张图片）。我已经检查了代码，我可以看到 class "slick-active" 在滑动效果的过渡完成后首先被正确放置，但只有当它从最后一张图片到第一张图片时，在所有其他一旦滑动过渡开始，它就会坐下。我已经为此苦苦挣扎了几个小时，任何建议都非常有用

Answer 1

我得到了一些帮助并通过添加此 JS 和 CSS 找到了解决方案：

CSS:

.img_overlay1{
    opacity: 1 !important;
    transition: 1s;
}
.img_overlay2{
    opacity: 0.3 !important;
    transition: 1s;
}

和 JS:

$('#pics').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
    $('.img').find('div:first-child').removeClass('img_overlay2');
    $('.img').find('div:first-child').removeClass('img_overlay1');
    if (nextSlide == 0) {
        $('.img').each(function () {
            obj = $(this);
            if (obj.data('slick-index') == currentSlide + 1) {
                obj.find('div:first-child').addClass('img_overlay1');
            }
            if (obj.data('slick-index') == currentSlide + 2) {
                obj.find('div:first-child').addClass('img_overlay2');
            }
        });
    } else {
        $('#pics').removeClass('slick-center');
    }
});

工作 jsfiddle：https://jsfiddle.net/jgfrs331/231/

从最后一项转到第一项时，圆滑的轮播中心 class 不工作

Slick carousel center class not working when going from last item to first item

html

css

jquery

slick.js