【slick】slickで2枚表示のスライダーを作成する方法

今回はslickを使って1枚ではなく2枚表示で1枚ずつスライダーを動かしていく方法について紹介していきたいと思います。

slickで2枚表示のスライダーを作成

html

<div class="section">
    <div class="sliderArea slider">
      <div><img src="https://placehold.jp/3d4070/ffffff/1000x1000.png" alt=""></div>
      <div><img src="https://placehold.jp/3d4070/ffffff/1000x1000.png" alt=""></div>
      <div><img src="https://placehold.jp/3d4070/ffffff/1000x1000.png" alt=""></div>
      <div><img src="https://placehold.jp/3d4070/ffffff/1000x1000.png" alt=""></div>
      <div><img src="https://placehold.jp/3d4070/ffffff/1000x1000.png" alt=""></div>
    </div>
</div>

css

.slick-slide {margin: 0 5px;}
.slick-slide img {
	width: 100%;
	height: auto;
}

.section {
	width: 600px;
	margin: 0 auto;
}

.slick-dots{
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 15px 0;
}
.slick-dots ul{text-align; center;}
.slick-dots li{list-style: none;padding: 0 5px;}

js

jQuery(function() {
  jQuery(".sliderArea").slick({
    dots: true,
    arrows: false,
    slidesToShow: 2,
    slidesToScroll: 1
  });
});

サンプル