如何在 Slick Carousel 中使用箭头更改滑块的速度？

Question

我创建了一个徽标滑块，其显示类似于选取框。 我想做的是添加下一个/上一个箭头，当单击下一个箭头时可以加快滑块的速度，当单击上一个箭头时可以反转滑块。我目前使用光滑的轮播来制作它。

我也不知道为什么有时我的轮播会暂停一秒钟然后继续，任何人都可以帮助我吗？

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

Answer 1

这可用于使滑块变慢

 $("#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 方法改变速度会导致延迟：问题 https://github.com/kenwheeler/slick/issues/2334

Answer 2

用户XZY的回答对我有用。在使用它时，我还注意到

slick

（至少在我使用的实现中）公开了一个可修改的

options

属性。所以下面的方法也可能有效：

var slickSlider = $('.marquee-logo')[0]

slickSlider.slick.options.autoplaySpeed = 500

Answer 3

只需添加 SPEED 属性即可。

$(document).ready(function(){
  $('.your-slider').slick({
    speed: 3000
  });
});

Answer 4

{ "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 } { "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 } { "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 } { "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 }{ "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 } { "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 } { "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 } { "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 } { "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 } { "message": "未捕获的 ReferenceError: $ 未定义", “文件名”：“https://stacksnippets.net/js”， “线诺”：12， “科诺”：9 }