Slick Slider проблема "onclick" не работает после достижения точки останова

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>

Slick Slider Code

$('.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

Если вы хотите добавить "активный" класс к вашему тегу img, вам следует использовать jQuery find() или же children() функции, чтобы получить это.

Это не зависит от установленных вами точек останова.

Проверьте этот пример

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

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