光滑的旋转木马-通过外部命令禁用控件和交互

Slick Carousel - Disable controls and interactions by external order

本文关键字：控件 交互 命令 外部 旋转木马 -通      更新时间：2023-09-26

我正在学习JavaScript，我有一个简单的问题，我不知道如何处理。

我想要实现的是"保持"或"冻结"幻灯片，禁用所有可能的导航(键盘箭头，点击和拖动，触摸交互)，只有当用户需要时单击button。通过单击此button，用户可以使用滑块启用或禁用导航控件。

所以，一旦点击这个button，用户不能在幻灯片上导航。用户必须再次单击button以启用控件。

这是我目前得到的:

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>

我还能错过什么?

非常感谢你的帮助!

使用slickSetOption到set an individual value live。参见http://kenwheeler.github.io/slick/

的Methods部分。

下面是一个工作示例:

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>

相关文章：