代码之家 › 专栏 › 技术社区 › abbas_arezoo

在模式叠加中同时播放多个圆滑的旋转木马

slick.js carousel css jquery javascript

abbas_arezoo · 技术社区 · 7 年前

要启动旋转木马,我希望用户单击一个相关按钮,相应的滑块将以一种模式显示,其背后有一个半透明的背景。

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

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

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

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

2 回复 | 直到 7 年前

Awsme Sandy 7 年前

试试这样的

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

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

return false;
});

madalinivascu 7 年前

请尝试以下操作:

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