Question

我试图使用Slick carousel jquery插件制作（无限）图片的旋转木马，其中所有图片的不透明度均为0.5，除了当前位于中心的图片，应该设置为1.0 1秒过渡

我制作了以下代码：

HTML：

await getData()

CSS：

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

JS：

    *, 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;
    }

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

这种方法很好，除非它从最后一张图片到下一张图片（下一张图片实际上是第一张图片再次显示）。我已经检查了代码，我可以看到这个类＆＃34;光滑活跃＆＃34;在完成滑动效果的转换之后，首先正确地坐着，但是只有当它从最后一张到第一张图片时，在所有其他时间它才会在滑动过渡开始时立即进行。我已经挣扎了好几个小时，任何建议都很贴心

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/

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

1 个答案: