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?

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?

• javascript
• jquery
• slick.js

1 Answer 1

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

//Arguments: option : string, value : depends on option, refresh : boolean

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