estevan estevan - 1 year ago 257
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?

Answer Source

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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download