CODEWITHSUNDEEP
slick.js
Supertoto
Supertoto

Reputation: 11

How to take the shortest path with Slick slider dots (infinite mode on)?

I'm using slick slider with infinite mode on and I would like that the dots take the shortest path. Ex : I am on the first slide and I click on the last dot it should go one slide left and not 4 slides right (I have 5 slides).

I tried to change the scrolling direction with negative values for slidesToScroll but it did not work.

Upvotes: 1

Views: 52

Answers (1)

sharmamehu
sharmamehu

Reputation: 11

Please find the jsfiddle link here: https://jsfiddle.net/sharmamehu01/fxjcys75/4/

 var $slider = $('.slider-for');
 $slider.slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   dots:true,
   autoplay:true,
   infinite:true,
   autoplaySpeed:1000,
});

 $('.slick-dots button').on('click',function(e) {
    e.preventDefault();
    callme(true);
 });

function callme(fromdots){
$slider.on('beforeChange', function(event, { slideCount: count }, currentSlide, nextSlide){
        if(fromdots){
            $slider.slick('slickSetOption', 'speed', 0);
            fromdots = false;
        }
});

$slider.on('afterChange', function(event, { slideCount: count }, currentSlide, nextSlide){
        $slider.slick('slickSetOption', 'speed', 300); // its a default normal speed ot slick slider
        fromdots = false;
         $('.slick-dots button').blur(); // to remove focus on dots otherwise your slide will stuck
});
}

there is no default solution for this problem, in that case, you need to change the speed of your slider, you can achieve this with the help of beforeChange and afterChange.

I hope you will find the helpful. Thank you :)

Upvotes: 0

Related Questions