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

Question

我已经创建了一个类似于跑马灯的徽标滑块。我想要做的是添加下一个/上一个箭头，当点击下一个箭头时可以加速滑块的速度，并在点击上一个箭头时反转滑块。我目前使用slick轮播图来实现它。

此外，我不知道为什么有时我的轮播图会暂停一秒钟然后继续，有人能帮帮我吗？

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

- Takumi

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方法更改速度会导致延迟：issue https://github.com/kenwheeler/slick/issues/2334

- XYZ

---

我还没有尝试过这个，一旦我尽快完成了，我会更新结果。 - Takumi

Answer 2

只需添加SPEED属性，就可以了。

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

- Aleksandar

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 3

用户XZY的答案对我有用。在尝试过程中，我还注意到slick（至少在我使用的实现中）公开了一个可修改的options属性。因此，下面的代码也可能有效：

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

slickSlider.slick.options.autoplaySpeed = 500

- apeltz