CODEWITHSUNDEEP
jquerysliderslick.js
Paul Smith
Paul Smith

Reputation: 105

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

Upvotes: 6

Views: 34995

Answers (4)

Ali Raza
Ali Raza

Reputation: 99

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

Upvotes: 0

REX
REX

Reputation: 11

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

Upvotes: 1

Lynn Stahl
Lynn Stahl

Reputation: 174

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;

Upvotes: 12

mazzaker
mazzaker

Reputation: 166

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

Upvotes: 15

Related Questions