Question

我有一个带有“ onclick”功能的光滑滑块。当我单击当前幻灯片时，我应该在图像容器上添加“活动”类。一切正常，但响应速度很快，当分辨率达到断点时，则不起作用。

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

在断点滑动滑块上重新加载滑块，而js不起作用。

我如何解决此问题？

谢谢！

Answer 1

我找到了解决方案。需要设置断点控件

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

Answer 2

如果要将“ active”类添加到img标签，则应使用jQuery find()或children()函数来获取它。

它不取决于您设置的断点。

查看此示例

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

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

到达断点后，Slick Slider问题“ onclick”不起作用

2 个答案: