無限に流れ続けるスライダー slick.js

無限に流れ続けるスライダーをよく作るので備忘録です

CDN

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.js"></script>

html

<ul class="slider">
 <li><img src="https://picsum.photos/200/200?random=1"></li>
 <li><img src="https://picsum.photos/200/200?random=2"></li>
 <li><img src="https://picsum.photos/200/200?random=3"></li>
 <li><img src="https://picsum.photos/200/200?random=4"></li>
 <li><img src="https://picsum.photos/200/200?random=5"></li>
 <li><img src="https://picsum.photos/200/200?random=6"></li>
 <li><img src="https://picsum.photos/200/200?random=7"></li>
</ul>

scss

ul {
  padding: 40px 0;
  li {
    padding: 10px;
    width: 200px;
    height: 200px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 5px;
    }
  }
}

jQuery

$('.slider').slick({
  autoplay: true,
  autoplaySpeed: 0,
  speed: 3000,
  cssEase: "linear",
  slidesToShow: 5,
  arrows: false,
  responsive: [{
    breakpoint: 750,
    settings: {
      slidesToShow: 3,
    }
  }]
});