从最后一项转到第一项时，圆滑的旋转木马中心类不起作用

Question

我正在尝试用圆滑的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/

除了从最后一张图片转到下一张图片(下一张图片实际上是再次显示的第一张图片)之外，这种方法工作得很好。我已经检查了代码，我可以看到"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/