我创建了一个 Logo slider ,其显示类似于选取框。 我想做的是添加下一个/上一个箭头,可以在单击下一个箭头时加快 slider 的速度,并在单击上一个箭头时反转 slider 。我目前使用 slick 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>
最佳答案
这可以用来使 slider 变慢
$("#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
在按钮上单击首先销毁 slider 并以增加/减少的速度再次添加 slider
您也可以尝试使用此 $('.marquee-logo').slick('slickSetOption', 'speed', 500,true);
而不会破坏 slider
但是通过 slickSetOption 方法改变速度会导致延迟:问题 https://github.com/kenwheeler/slick/issues/2334
关于javascript - 如何在 Slick Carousel 中使用箭头更改 slider 的速度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40231495/