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="">
</div>
<div class="slider-logo">
<img src="">
</div>
<div class="slider-logo">
<img src="">
</div>
<div class="slider-logo">
<img src="">
</div>
<div class="slider-logo">
<img src="">
</div>
</div>
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
Share Improve this question asked Oct 25, 2016 at 4:41 TakumiTakumi 3551 gold badge7 silver badges19 bronze badges3 Answers
Reset to default 8This 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./kenwheeler/slick/issues/2334
User XZY's answer worked for me. While playing with it I also noticed that slick
(at least in the implementation I was using) exposes an options
property which is modifiable. So the below might work as well:
var slickSlider = $('.marquee-logo')[0]
slickSlider.slick.options.autoplaySpeed = 500
Just add the SPEED property, that should be it.
$(document).ready(function(){
$('.your-slider').slick({
speed: 3000
});
});