slick のオプション

これまで Swiper 一択だったけど Slick のほうがカルーセルの個数など融通ききやすい気がするのでいつもググるものをメモしておきます。

slick - the last carousel you’ll ever need

<ul class="js-carousel-hero">
  <li><img src="slide.png"></li>
  <li><img src="slide.png"></li>
  <li><img src="slide.png"></li>
</ul>

$(".js-carousel").slick({
  mobileFirst: true,
  centerPadding: 0,
  dots: true,
  arrows: true,
  infinite: true,
  speed: 400,
  autoplay: true,
  autoplaySpeed: 4000,
  cssEase: 'ease-in',
  responsive: [
    {
      breakpoint: 768,
      settings: {
        // for PC settings  
        centerMode: true,
        variableWidth: true
      }
    }
  ]
});

PCでスライドの横幅指定且つセンターモードにしたい場合は下記のようにcssで指定する （オプション側だとうまくいかなかった.）

ul {
  li {
    width: 1000px;
  }
}