带有相应图像部分的光滑滑块

Question

我使用 Ken Wheeler 的 slick-slider (https://kenwheeler.github.io/slick/) 制作了一个简单的滑块，并且我添加了一个图像显示功能，可以将滑块下方的另一个图像（不是实际的滑块图像）切换到与滑块相对应。我想要一个产品轮播，它有一个与 slick-slider 中的产品相对应的横幅图像。下面的代码是功能性的，但想知道是否有更简洁的方法来实现这一点。在检查不活动的幻灯片并隐藏相应的图像时，我被挂断了电话，也许是啰嗦。谢谢

$(document).ready(function () {
    $('.my-slide-wrapper').slick({
        dots: true,
        infinite: true,
        speed: 1,
        slidesToShow: 1,
        slidesToScroll: 1
    });
    $("button.slick-arrow").click(function () {
        if ($("#slick-slide00").hasClass("slick-active") && (!$("#slick-slide01 #slick-slide02").hasClass("slick-active"))) {
            $("#myImage00").addClass("im-showing"),
                $("#myImage01").removeClass("im-showing"),
                $("#myImage02").removeClass("im-showing");
        }
        else if ($("#slick-slide01").hasClass("slick-active") && (!$("#slick-slide02 #slick-slide00").hasClass("slick-active"))) {
            $("#myImage01").addClass("im-showing"),
                $("#myImage02").removeClass("im-showing"),
                $("#myImage00").removeClass("im-showing");
        }
        else {
            $("#myImage02").addClass("im-showing"),
                $("#myImage01").removeClass("im-showing"),
                $("#myImage00").removeClass("im-showing");
        }
    });
});

CodePen 上的工作版本：https://codepen.io/jakeos/pen/povXPyd

Answer 1

您应该查看文档中的 "Slider Syncing"。它正是这样做的。在您的情况下，您需要将两者都设置为滑块并使用顶部滑块作为底部滑块的导航。

我稍微修改了你的HTML，让它更容易理解

Here's a working fiddle.

HTML

<!-- This is just a slider using Ken Wheeler's slick-slider (https://kenwheeler.github.io/slick/), and I've added an image display function that switches the image below (the slider) to correspond with the slider. It will ultimately be for a product carousel that will have a banner image that corresponds with the product in the slider. -->

<body>

    <div class="my-slide-container">

        <div id="top-slider" class="my-slide-wrapper">
            <img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Slide+1">
            <img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Slide+2">
            <img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Slide+3">
        </div>

        <div id="bottom-slider" class="my-slide-wrapper">
            <img class="slide slide00" src="https://dummyimage.com/300x180/ff0000/ffffff.jpg&text=Image+1">
            <img class="slide slide01" src="https://dummyimage.com/300x180/00ff00/000000.jpg&text=Image+2">
            <img class="slide slide02" src="https://dummyimage.com/300x180/0000ff/ffffff.jpg&text=Image+3">
        </div>

    </div>

</body>

CSS

.my-slide-container {
  margin: 30px;
}

.my-slide-wrapper,
.my-image-wrapper {
  margin: 0 auto;
  max-width: 300px;
}

img {
  max-width: 300px;
  width: 100%;
}

.slick-dots li {
  margin: 0;
}

.slick-next::before,
.slick-prev::before {
  color: #000;
  opacity: 1;
}

.my-image {
  visibility: hidden;
  position: absolute;
}

#myImage00 {
  visibility: visible;
}

.im-hiding {
  visibility: hidden;
}

.im-showing {
  visibility: visible;
}

JS

$(document).ready(function () {
    $('#top-slider').slick({
        asNavFor: '#bottom-slider',
        dots: true,
        infinite: true,
        speed: 1,
        slidesToShow: 1,
        slidesToScroll: 1
    });

    $('#bottom-slider').slick({
        arrows: false,
        dots: false,
        draggable: false,
        infinite: true,
        speed: 1,
        slidesToShow: 1,
        slidesToScroll: 1
    });

});

带有相应图像部分的光滑滑块

slick-slider with Corresponding Image Section

javascript

jquery

slick.js