Search code examples
javascripthtmlcarouselslick.js

How can I change the speed of slider using arrow in Slick Carousel?


I have created a logo slider which displays similar to marquee. What I want to do is to add next/prev arrows that can accelerate the speed of slider when click next arrow and reverse the slider when click prev arrow. I currently use slick carousel to make it.

Also I have no idea why sometimes my carousel pause for a second then continue, can anyone help me with this?

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


Solution

  • This can be used to make slider slow

     $("#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,
      });});
    

    This for making faster

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

    On button click first destroy the slider and add slider again with increased/decreased speed

    You can also try by this $('.marquee-logo').slick('slickSetOption', 'speed', 500,true); with out destroying the slider

    But speed change by slickSetOption method cause a delay:issue https://github.com/kenwheeler/slick/issues/2334