Question

58

Slick Carousel - Disable controls and interactions by external order

rated 0 times [ 65] [ 7] / answers: 1 / hits: 21960 / 8 Years ago, wed, october 26, 2016, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

analiseb

Add To Favorites

Follow

Total Points: 252

Total Questions: 96

Total Answers: 106

Location: Singapore

Member since Sat, Jul 25, 2020

4 Years ago

answered 8 Years ago lailab · Accepted Answer

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>