我在用滑块。我在页面上有三个滑块,它们都有相同的类和滑块选项。然而,我想要三个不同的滑块‘自动播放速度’选项或添加随机延迟的每一个所有三个滑块,而不是创建不同的类别为每一个滑块。有可能吗?
三张具有相同类名的幻灯片:
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
我希望所有三个滑块都有不同的幻灯片变化的开始(每个滑块中的幻灯片不必随机变化)。
可以在原始选择器上使用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>