Disable sliding when selecting a slide in slick slider

问题

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

回答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

回答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;

回答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 });

来源：https://stackoverflow.com/questions/35449209/disable-sliding-when-selecting-a-slide-in-slick-slider

标签

jquery

slider

slick.js