Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 572
Takumi Avatar asked Oct 25 '16 04:10

Takumi


People also ask

How do you hide the arrows in slick slider?

$('. slider'). slick({ dots: false, prevArrow: false, nextArrow: false });

How do you reinitialize slick slider?

After calling an request, set timeout to initialize slick slider. Do not initialize slick slider at start. Just initialize after an AJAX with timeout. That should work for you.

Is slick slider responsive?

Fully responsive. Scales with its container.


1 Answers

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

like image 59
XYZ Avatar answered Sep 16 '22 14:09

XYZ