Question

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

三个具有相同类别名称的幻灯片：

$('.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()

光滑的滑块随机自动播放速度，可让更多具有相同滑块级别的滑块

1 个答案: