Slick Carousel - Disable controls and interactions by external order

Question

I'm learning JavaScript and I've got a simple problem that I don't know how to deal with it.

What I want to achieve is to 'hold' or 'freeze' a slide disabling all kind of possible navigation (keyboard arrows, click and drag, touch interaction) by only clicking a button when the user desires. By clicking this button the user enables or disables the navigation controls with the slider.

So, once clicked this button the user can't navigate on the slides. The user has to click again on the button to enable the controls.

This is what I got so far:

jQuery(document).ready(function($) {
  $('.slider').slick({
    infinite: true,
    fade: false,
    centerMode: true,
    variableWidth: true,
    slidesToShow: 3,
    slidesToScroll: 1,
    arrows: false,
    autoplay: false
  });
});

  var hold = false;

  $('#hold').click(function() {
      $(this).attr("class", "active disabled");

      if (hold == false) {
          $('.slider').slick({
            accesibility: false,
            draggable: false,
            swipe: false,
            touchMove: false
          });
          hold = true;

      } else {
        $('.slider').slick({
            accesibility: true,
            draggable: true,
            swipe: true,
            touchMove: true
          });
        hold = false;
        $("#hold").attr("class", "disabled");
      }

  });

.card {
  margin: 10px;
  padding: 50px 100px;
  background-color: silver;
  color: white;
}

.active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js' type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" />

<div class="slider">
  <h1 class="card">1</h1>
  <h1 class="card">2</h1>
  <h1 class="card">3</h1>
  <h1 class="card">4</h1>
  <h1 class="card">5</h1>
</div>

<button id="hold" class="disabled">HOLD</button>

What could I've been missing?

Your help is really appreciated!

Answer 1

Use slickSetOption to set an individual value live. See the Methods section at http://kenwheeler.github.io/slick/

Below is a working example.

var slider = $("#slider");
slider.slick({
  arrows: false,
  centerMode: true,
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  variableWidth: true
});

var hold = false;
$("#hold").click(function() {
  slider.slick("slickSetOption", "accessibility", hold);
  slider.slick("slickSetOption", "draggable", hold);
  slider.slick("slickSetOption", "swipe", hold);
  slider.slick("slickSetOption", "touchMove", hold);
  
  hold = !hold;
  
  $(this).toggleClass("disabled");
});

h1 {
  background-color: silver;
  color: white;
  margin: 10px;
  padding: 50px 100px;
}

.disabled {
  color: red;
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<div id="slider">
  <h1>1</h1>
  <h1>2</h1>
  <h1>3</h1>
  <h1>4</h1>
  <h1>5</h1>
</div>
<button id="hold">HOLD</button>