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

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

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;