скользящий слайдер с соответствующим разделом изображения - PullRequest
Новая
       16

скользящий слайдер с соответствующим разделом изображения

1 голос
/ 31 января 2020

Я сделал простой слайдер, используя slick-slider Кена Уилера (https://kenwheeler.github.io/slick/), и я добавил функцию отображения изображения, которая переключает другое изображение под слайдером (не фактическое изображение слайдера) ), чтобы соответствовать с ползунком. Я хотел бы это для карусели товаров, у которой будет изображение баннера, которое соответствует продукту в скользящем слайдере. Приведенный ниже код работает, но ему было интересно, есть ли более чистый способ добиться этого. Я застрял и, возможно, долго скучал, проверяя неактивные слайды и скрывая соответствующие изображения. Спасибо. 

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

1 Ответ

0 голосов
/ 31 января 2020

Вы должны проверить "Синхронизация ползунка" в документации. Это именно так. В вашем случае вам нужно установить оба слайдера и использовать верхний слайдер в качестве навигации для нижнего.

Я немного изменил ваш HTML, чтобы его было легче понять

Вот рабочая скрипка . 

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

});
...