使用相同滑块的更多滑块的光滑滑块随机自动播放速度 class

Question

我正在使用光滑的滑块。我在页面上有三个滑块，它们都有相同的 class 和灵活的选项。但是，我想要三个不同的光滑 'autoplaySpeed' 选项，或者为所有三个滑块分别添加随机延迟，而不是为每个滑块创建不同的 class。这可能吗？

三张具有相同 class 名称的幻灯片：

$('.slider').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

.flex-row {
  display: flex;
}

.slider {
  width: 33.33%;
  padding: 20px;
}

.slider div img {
  width: 100%;
  height: auto;
}

<div class="flex-row">
  <div class="slider">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
  </div>
  <div class="slider">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
  </div>
  <div class="slider">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
  </div>
</div>

预期结果（三个不同的 'autoplaySpeed' 选项）：

https://jsfiddle.net/x78y143f/2/

$('.slider1').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 2000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

$('.slider2').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 5000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

$('.slider3').slick({
  arrows: false,
  infinite: true,
  speed: 1000,
  autoplay: true,
  autoplaySpeed: 8000,
  fade: true,
  slidesToShow: 1,
  slidesToScroll: 1
});

.flex-row {
  display: flex;
}

.slider1,
.slider2,
.slider3 {
  width: 33.33%;
  padding: 20px;
}

.slider1 div img,
.slider2 div img,
.slider3 div img {
  width: 100%;
  height: auto;
}

<div class="flex-row">
  <div class="slider1">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
  </div>
  <div class="slider2">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz2.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
  </div>
  <div class="slider3">
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz3.png" />
    </div>
    <div>
      <img src="http://kenwheeler.github.io/slick/img/fonz1.png" />
    </div>
  </div>
</div>

我希望所有三个滑块都有不同的幻灯片切换开始（每个滑块中的幻灯片不必随机更改）。

Answer 1

您可以在原始选择器上使用 each loop

$('.slider').each(function(index) {
  var randomSpeed = 1000 * (index + 1);  // code to calculate random speed here

  $(this).slick({
    arrows: false,
    infinite: true,
    speed: 1000,
    autoplay: true,
    autoplaySpeed: randomSpeed,
    fade: true,
    slidesToShow: 1,
    slidesToScroll: 1
  });
});

如果您需要生成适当的随机数，请查看Math.random()

使用相同滑块的更多滑块的光滑滑块随机自动播放速度 class

Slick slider random autoplay speed for more sliders with same slider class

html

javascript

jquery

slider

slick.js