Question

我有一个包含许多隐藏光滑旋转木马的页面。

要启动旋转木马，我希望用户点击相关按钮，相应的滑块会显示在背后有半透明背景的模态中。

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

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

Answer 2

尝试以下方法：

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

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

2 个答案: