Slick Slider 问题 "onclick" 在到达断点后不起作用

Question

我有一个带有 "onclick" 功能的光滑滑块。当我单击当前幻灯片时，我应该在图像容器上添加 "active" class。一切正常，但在响应时，当分辨率达到断点时，不工作。

Html代码

<div class="my-gallery">
  <div class="my-gallery-image">
    <img src="">
  </div>
  <div class="my-gallery-image">
    <img src="">
  </div>
  <div class="my-gallery-image">
    <img src="">
  </div>
</div>

光滑的滑块代码

$('.my-gallery').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    dots: true,
    arrows: true
    responsive: [
      {
        breakpoint: 993,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 601,
        settings: {
          slidesToShow: 1,
        }
      }     
    ]      
});

脚本代码

$('.my-gallery-image').on('click', function() {
    $(this).addClass('active');
});

在断点上 slick 滑块重新加载滑块并且 js 不工作。

我该如何解决这个问题？

谢谢！

Answer 1

我找到了解决办法。需要设置断点控件

$('.my-gallery').on('breakpoint', function() {
    $('.my-gallery-image').on('click', function() {
        $(this).addClass('active');
    });
});

Answer 2

如果您想将 "active" class 添加到您的 img 标签中，您应该使用 jQuery find() 或 children() 函数来获取它。

与你设置的断点无关

看看这个例子

$('.my-gallery-image').on('click', function() {
    $(this).children('img').addClass('active');
});

https://jsfiddle.net/ob0L1rth/1/

Slick Slider 问题 "onclick" 在到达断点后不起作用

Slick Slider issue "onclick" don't work after breakpoint reached

javascript

wordpress

jquery

slick.js