我已经创建了一个标识滑块,显示类似于选框。我想做的是添加下一个/前一个箭头,当单击下一个箭头时可以加速滑块的速度,当单击前一个箭头时可以反转滑块。我目前使用光滑的carousel来制作它。
我也不知道为什么有时我的旋转木马暂停一秒钟然后继续,有人能帮助我吗?
$(document).ready(function($) {
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 6500,
initialSlide: 1,
draggable: false,
});
});
<div class="marquee-logo">
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
<div class="slider-logo">
<img src="http://placehold.it/350x150">
</div>
</div>
http://codepen.io/takumi24/pen/JRzEjA 这可以用来使滑块变慢
$("#slowbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 10000,
initialSlide: 1,
draggable: false,
});});
这是为了更快
$("#nextbutton").click(function(){
$('.marquee-logo').slick('unslick');
$('.marquee-logo').slick({
autoplay: true,
infinite: true,
autoplaySpeed: 0,
slidesToScroll: 1,
slidesToShow: 5,
arrows: false,
cssEase: 'linear',
speed: 300,
initialSlide: 1,
draggable: false,
});
});
http://codepen.io/anon/pen/yawgra 在按钮上先点击破坏滑块,然后再添加滑块,增加/减少速度
你也可以在不破坏滑块
的情况下尝试这个$('.marquee-logo').slick('slickSetOption', 'speed', 500,true);
但是通过slickSetOption方法改变速度会导致延迟:issue https://github.com/kenwheeler/slick/issues/2334
用户XZY的回答对我很有用。在玩它的时候,我也注意到slick
(至少在我使用的实现中)暴露了一个可修改的options
属性。所以下面的代码也可以用:
var slickSlider = $('.marquee-logo')[0]
slickSlider.slick.options.autoplaySpeed = 500
只需添加SPEED属性,就可以了。
$(document).ready(function(){
$('.your-slider').slick({
speed: 3000
});
});