Javascript 多个光滑的旋转木马在模态叠加播放在同一时间

我有一个页面，里面有许多隐藏的光滑旋转木马

要启动旋转木马，我希望用户单击一个相关的按钮，相应的滑块将显示在一个带有半透明背景的模式中

但是，当您启动页面上的任何旋转木马时，所有旋转木马都会启动，并且可以看到彼此后面的自动播放

这是我的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>

以下是我的灵活配置：

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

---

有没有办法只启动与单击的按钮相关的一个旋转木马？

试试这样的方法

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

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

return false;
});

请尝试以下操作：

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

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

    $galleryModal.next('.modal').toggleClass('is-open');//open only the modal asociated to the button
    var $imgGallery = $(this).next('.modal').find('.img-gallery__slides');//get the gallery from that modal
$('.img-gallery__slides').slick('unslick');//destroy the other gallery 
$imgGallery.slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: false,
  arrows: false,
  accessibility: false,
  cssEase: 'ease',
  autoplay: true,
  autoplaySpeed: 5000,
});
    return false;
});

---

这是一种享受。如果启动gallery的按钮位于多个子div中，该如何工作？谢谢如果按钮在其他地方，那么您可以使用

data

属性，就像在按钮add

data target

中一样，在模式中您可以给出id。例如

启动gallery 2

，模式的id应该是

，并使用'var$target=$（this）.attr（“target”）；'

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

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

    $galleryModal.next('.modal').toggleClass('is-open');//open only the modal asociated to the button
    var $imgGallery = $(this).next('.modal').find('.img-gallery__slides');//get the gallery from that modal
$('.img-gallery__slides').slick('unslick');//destroy the other gallery 
$imgGallery.slick({
  infinite: true,
  slidesToShow: 1,
  slidesToScroll: 1,
  dots: false,
  arrows: false,
  accessibility: false,
  cssEase: 'ease',
  autoplay: true,
  autoplaySpeed: 5000,
});
    return false;
});