Javascript 带相应图像部分的光滑滑块_Javascript_Jquery_Slick.js

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

javascript jquery

Javascript 带相应图像部分的光滑滑块,javascript,jquery,slick.js,Javascript,Jquery,Slick.js,我使用Ken Wheeler的slick slider（）制作了一个简单的滑块，并添加了一个图像显示功能，可以切换滑块下方的另一个图像（而不是实际的滑块图像）以与滑块相对应。我希望这是一个产品转盘，将有一个横幅图像，对应的产品在光滑的滑块。下面的代码是功能性的，但我想知道是否有更干净的方法来实现这一点。当我检查不活动的幻灯片并隐藏相应的图像时，我挂断了电话，可能是发了大脾气。谢谢 $(document).ready(function () { $('.my-slide-wrapper')

我使用Ken Wheeler的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上的工作版本：

您应该查看文档中的“滑块同步”。正是这样。在您的情况下，您需要将两者设置为滑块，并使用顶部滑块作为底部滑块的导航

我对你的HTML做了一些修改，使它更容易理解

您应该查看文档中的“滑块同步”。正是这样。在您的情况下，您需要将两者设置为滑块，并使用顶部滑块作为底部滑块的导航

我对你的HTML做了一些修改，使它更容易理解

令人惊叹的。谢谢你，@vvv。好极了。我在这里更新了：太棒了。谢谢你，@vvv。好极了。我在这里更新了：

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>

.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;
}

$(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
    });

});