当前位置: 首页 > 知识库问答 >
问题:

滑块随机自动播放速度,用于具有相同滑块类的更多滑块

常甫
2023-03-14

我在用滑块。我在页面上有三个滑块,它们都有相同的类和滑块选项。然而,我想要三个不同的滑块‘自动播放速度’选项或添加随机延迟的每一个所有三个滑块,而不是创建不同的类别为每一个滑块。有可能吗?

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

https://jsfidle.net/x78y143f/1/

null

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

null

预期结果(三种不同的“自动播放速度”选项):

https://jsfidle.net/x78y143f/2/

null

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

null

我希望所有三个滑块都有不同的幻灯片变化的开始(每个滑块中的幻灯片不必随机变化)。

共有1个答案

乐正晟
2023-03-14

可以在原始选择器上使用each循环

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

 类似资料:
  • 我知道这个问题已经问过很多次了,但都没有解决我的问题。我有一个滑块(与ACF pro)和我只是希望所有我的图像是相同的高度(这意味着:所有的肖像img有相同的高度(并改变他们的宽度),作为一个景观img)。 这里是我当前的代码:HTML CSS JS Slick网站给出的例子是: 在此输入图像说明

  • 这是一个滑杆。拖动滑杆,改变数值的大小。 用法 Your browser does not support the video tag. 案例:数字标签 功能:显示数字改变的规律

  • 问题内容: 我一直在寻找有关如何执行此操作的答案,但似乎无法弄清楚(甚至在查看jQuery UI主题文档时也是如此)。当我从左向右移动滑块时,我希望滑块旋钮左侧的部分变为橙色(而不是默认的灰色)。 jQuery主题卷生成了以下CSS。大概.ui-widget- header背景色可以控制它,但是似乎没有。也不向其他任何类别添加背景色。知道如何解决此问题,以便在水平滑动时获得不同的颜色吗? JQUE

  • 介绍 滑动输入条,用于在给定的范围内选择一个值。 引入 import { createApp } from 'vue'; import { Slider } from 'vant'; const app = createApp(); app.use(Slider); 代码演示 基础用法 <van-slider v-model="value" @change="onChange" /> imp

  • 滑块常用于区间数字选择 DOM结构 <div class="mui-input-row mui-input-range"> <label>Range</label> <input type="range" min="0" max="100"> </div> 扩展阅读代码块激活字符 mrange

  • import { Range } from 'feui'; components: { [Range.name]: Range } 代码演示 基础用法 <fe-group> <fe-cell> <fe-range v-model='date1' on-change='onChange'></fe-range> </fe-cell> </fe-group>