Slick event brakepoint

Toggle class name on click in jQuery

by kazuya nakagawa

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/destyle.min.css">

<!-- slick.js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.css">



<div class="slider">
   <div><img src="https://marucu.com/wp-content/uploads/2023/04/815297.jpg" alt="image1"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/1072821.jpg" alt="image2"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/7884473.jpg" alt="image3"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/2215317.jpg" alt="image4"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/174276.jpg" alt="image5"></div>
  <div><img src="https://marucu.com/wp-content/uploads/2023/04/1681485.jpg" alt="image6"></div>
</div>

CSS

.slider img {
  width: 100%;
  height: auto;
}

JavaScript

$('.slider').slick({
  dots:true,
   responsive: [{
      breakpoint: 640,
      settings: {
        slidesToShow: 5
      }
    }, {
      breakpoint: 480,
      settings: {
        slidesToShow: 3
      }
    }, {
      breakpoint: 320,
      settings: {
        slidesToShow: 1
      }
    }]
 });

$('.slider').on('breakpoint', function(event, slick, breakpoint) {
  // ブレークポイントが切り替わったときに何らかの処理を実行する
  alert('ブレークポイントが切り替わりました: ' + breakpoint);
});