gpt4 book ai didi

javascript - 光滑的 slider 随机自动播放速度,适用于具有相同 slider 类别的更多 slider

转载 作者:行者123 更新时间:2023-11-30 19:17:02 29 4
gpt4 key购买 nike

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

具有相同类名的三张幻灯片:

https://jsfiddle.net/x78y143f/1/

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

我希望所有三个 slider 都有不同的幻灯片更改开始(每个 slider 中的幻灯片不必随机更改)。

最佳答案

您可以使用 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()

关于javascript - 光滑的 slider 随机自动播放速度,适用于具有相同 slider 类别的更多 slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57885912/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com