【jQuery】slickでブレイクポイントを設定し、デバイスごとに表示枚数を変える

slickで、デバイスごとにスライドする画像枚数を変更したいときの設定方法です。

サンプルはこちら。

htmlはこちら。

<div class="slider">
  <div><img src="./assets/images/img_05.jpg"></div>
  <div><img src="./assets/images/img_06.jpg"></div>
  <div><img src="./assets/images/img_07.jpg"></div>
  <div><img src="./assets/images/img_08.jpg"></div> 
  <div><img src="./assets/images/img_09.jpg"></div>
</div>

jsはこちら。

$(function() {
var slider = $('.slider');
slider.slick({
	autoplay:true,
	autoplaySpeed:8000,
	slidesToShow: 5,  //PCは5枚
	slidesToScroll: 1,
	responsive: [
		{
		　　breakpoint: 1024,　//1024pxのとき
		　　settings: {
		　　　slidesToShow: 3　//3枚
		　　}
		},
		{
		　　breakpoint: 768,　//768pxのとき
		　　settings: {
		　　　slidesToShow: 2　//2枚
		　　}
	　　　　}
	　　]
	});
});

ブレイクポイント毎に表示枚数を変更するだけでなく、その他の設定も変更できます。（例えば、PC時はarrows有り、SP時はarrows無しなど。）

いろいろ試してみてくださいね！