Disable sliding when selecting a slide in slick slider

Question

I am using syncing sliders

"fullslide" - 1 slide at a time

"thumbslide" - 5 slides at a time, used as nav for fullslide

when selecting 1 slide from thumbslide i want it to become active without sliding to the left or to the center. Is there a way to achieve this?

CODE

$('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav',
    accessibility: false
});
$('.slider-nav').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: false,
    focusOnSelect: true,
    accessibility: false
});

Fiddle

I tried:

$('#sliders').slick({
     accessibility: false
});

from: Is there a way to disable slick slider from autoscrolling when clicked on navigation slider?

still not working

Thank you

Likelihood

which plugins you are using for the sliders? and show us your code. – Brusquerie

I am just using slick, added fiddle – Likelihood

how about something like this? – Brusquerie

Yes you got the behavior I want but... I need the nav to be a slider as well. But if all else fails you have given me an idea to just manually do it – Likelihood

Answer 1

Same answer as on github:

First set focusOnSelect: false for the nav.

Second the main should not have asNavFor or more events will be needed.

$('.slider-for').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true
});
$('.slider-nav').slick({
   slidesToShow: 5,
   slidesToScroll: 1,
   asNavFor: '.slider-for',
   dots: false,
   centerMode: false,
   focusOnSelect: false
});

$('.slider-nav .slick-slide').on('click', function (event) {
   $('.slider-for').slick('slickGoTo', $(this).data('slickIndex'));
});

Fiddle

Marmolada

Thank you! This works for me and I didn't expect it to be that simple :) – Likelihood

I was just looking for the same functionality and this is good, but I need to use the synced active class to link the nav and slider. Do you know if that's possible somehow? – Omphale

Worked for focusOnSelect thing which I forgot! Thanks, buddy – Beefy

Answer 2

FWIW, I just found a really easy way to disable scrolling - simply set the translate3d on .slick-track to this:

transform: translate3d(0px, 0px, 0px)!important;

Zilber

This worked for me too! I actually set transform: none !important instead. – Bibbye

Nice one, this is exactly what I was looking for thanks. – Designate

This will disable though the sliding when you click on the arrows and want to select the next not visible element. – Sanguinary

@Sanguinary , use .flex-control-nav rather than .slick-track , this is working for me like .flex-control-nav{ transform: translate3d(0,0,0) !important;} – Canon

Answer 3

I think you should use draggable feature form Slick and turn it into false, it works for me:

$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav',
accessibility: false,
draggable: false });

Pointer

Answer 4

In my case I used .flex-control-nav{ transform: translate3d(0,0,0) !important;}

Canon