estevan estevan - 7 months ago 93
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 () {
slider.slickSetOption("draggable", false, false);
}).focusout(function () {
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?


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


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

Working demo: