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

jQuery

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無しなど。)

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

jQuery
スポンサーリンク
Web Parts Box
タイトルとURLをコピーしました