javascript - 模态叠加层中的多个 Slick 轮播同时播放

Question

我有一个包含许多隐藏的 Slick 轮播的页面。

要启动轮播，我希望用户单击相关按钮，然后相应的 slider 将显示在其后面带有半透明背景的模态中。

但是，当您在页面上启动任何轮播时，所有轮播都会启动，并且可以看到一个接一个地自动播放。

这是我的 HTML:

<button class="launch-gallery">Launch gallery 1</button>
<div class="modal">
  <div class="img-gallery">
  <h2>Gallery 1</h2>
  <div class="img-gallery__slides">
    <div class="img-gallery__slide">
      <img src="image-1.jpg" alt="" />
    </div>
    <div class="img-gallery__slide">
      <img src="image-2.jpg" alt="" />
    </div>
  </div>
</div>

<button class="launch-gallery">Launch gallery 2</button>
<div class="modal">
  <div class="img-gallery">
  <h2>Gallery 2</h2>
  <div class="img-gallery__slides">
    <div class="img-gallery__slide">
      <img src="image-3.jpg" alt="" />
    </div>
    <div class="img-gallery__slide">
      <img src="image-4.jpg" alt="" />
    </div>
  </div>
</div>

这是我触发模态的 JS:

var $galleryModal = $('.modal');

$('.launch-gallery').click(function(){

    $galleryModal.toggleClass('is-open');

    return false;
});

这是我的 Slick 配置:

var $imgGallery = $('.img-gallery__slides');

$imgGallery.slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: false,
  arrows: false,
  accessibility: false,
  cssEase: 'ease',
  autoplay: true,
  autoplaySpeed: 5000,
});

有没有办法只启动与点击的按钮相关的一个轮播？

Answer 1

尝试这样的事情

$('.launch-gallery').click(function(){

$(this).next('.modal').toggleClass('is-open');

return false;
});