estevan estevan - 4 days ago 6
Javascript Question

Slick slider - Change draggable state on input focus event

I'm trying to remove draggable option while I'm in an input field (so I can select text and navigate inside the field with the arrows).

var slider = $('.slider').slick({
infinite: false,
speed: 300,
slidesToShow: 1,
adaptiveHeight: true,
asNavFor: '#menu-mobile',
draggable: true
});

$('input').focusin(function () {
console.log('in');
slider.slickSetOption("draggable", false, false);
}).focusout(function () {
console.log('out');
slider.slickSetOption("draggable", true, false);
});


It returns

Uncaught TypeError: undefined is not a function


on both events.

How do I change the draggable/swipe state with an event?

Answer

The plugin registers only function jQuery.fn.slick.

Methods are called on slick instances through the slick method itself in version 1.4

It is needed to call it like this:

// pseudocode
slider.slick("method", arguments, ...)

To fix your code change:

// wrong
slider.slickSetOption("draggable", false, false);

to:

// correct
slider.slick("slickSetOption", "draggable", false, false);

Working demo: https://jsfiddle.net/mattydsw/Lsj62qsx/25/

Comments