問題 × 解決策

slickの表示スライド数をPCとスマートフォンで変える

問題

「slick」で、PCとスマートフォンでの表示スライド数を変えたい。

解決策

「slick」のオプションで「responsive」、「breakpoint」を用いて、「slidesToShow」の数値を変更する。

 

スマートフォンでの表示スライド数の調整

スマートフォンはどんな機種であっても、どうしても幅に制限が出てしまい、表示するスライド数を調整する必要が出てきてしまいます。
今回はjQueryのスライダープラグイン「slick」で、PCとスマートフォンで表示スライド数を変える方法をご紹介します。

DEMOはこちら

スライド01

スライド01です。

スライド02

スライド02です。

スライド03

スライド03です。

スライド04

スライド04です。

スライド05

スライド05です。

スライド06

スライド06です。

スライド07

スライド07です。

スライド08

スライド08です。

スライド09

スライド09です。

スライド10

スライド10です。

HTML

<div class="slick-box showchange">
	<div class="slide">
		<p class="titles">スライド01</p>
		<p class="text">スライド01です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド02</p>
		<p class="text">スライド02です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド03</p>
		<p class="text">スライド03です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド04</p>
		<p class="text">スライド04です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド05</p>
		<p class="text">スライド05です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド06</p>
		<p class="text">スライド06です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド07</p>
		<p class="text">スライド07です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド08</p>
		<p class="text">スライド08です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド09</p>
		<p class="text">スライド09です。</p>
	</div>
	<div class="slide">
		<p class="titles">スライド10</p>
		<p class="text">スライド10です。</p>
	</div>
</div>

CSS

.slick-box .slide{
	padding: 20px;
	background-color: #EAE6E5;
	border: 1px solid #ffffff;
	border-right: none;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.slick-box .titles{
	margin-bottom: 10px;
	font-size: 125%;
	font-weight: bold;
	letter-spacing: 1pt;
	text-align: center;
}

「slick」のオプションのうちの一つ「responsive」を使用する。

「slick」には様々なオプションが用意されています。
その中で「responsive」の項目の設定を行うことで、PCとスマートフォンで表示スライド数の調整が可能となります。

responsive レスポンシブのブレイクポイントを設定することができ、オプションを切り替えることができます。

記述例

$('スライドを適用させる要素').slick({
	...
	responsive: [{
		breakpoint: ブレイクポイントの数値,
		settings: {
			ブレイクポイント以下のウインドウ幅の時のオプション設定
		}
	}]
});

ポイント!

この「responsive」で設定した「breakpoint」以下のウインドウ幅の時、この中のオプションの設定が優先されます。

表示スライド数の調整を行った記述例

上記を元にした、「slick」の表示スライド数をPC時には4つに、スマートフォン時には2つにする記述例は以下となります。

$('.slick-box.showchange').slick({
	infinite: true,
	slidesToShow: 4, // 表示スライド数 4つ
	slidesToScroll: 1,
	adaptiveHeight: true,
	autoplay: true,
	autoplaySpeed: 5000,
	focusOnSelect: true,
	pauseOnFocus: false,
	pauseOnHover: false,
	pauseOnDotsHover: false,
	swipeToSlide: true,
	arrows: false,
	responsive: [{
		breakpoint: 767,
		settings: {
			slidesToShow: 2, // 表示スライド数 2つ
			slidesToScroll: 1,
		}
	}]
});

参照

【[jQuery] レスポンシブ対応のカルーセルは「slick」が使いやすかった | 株式会社カンマン】
https://www.comman.co.jp/jquery-responsive-carousel-slick/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eleven + 4 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧