【Swiper】 数枚表示、数枚ずつ流れるスライダーを左寄せする方法

ろん
ろん

3枚表示して3枚ずつ移動するスライダーありますよね。

例えば3枚ずつ表示するスライダーで7枚、8枚など3で割り切れない数のとき7、8枚目だけ表示したいのに6～8枚目が表示されるのを何とかできないかと思って方法を探しました。

【通常】

スライダー01

【下の画像のようにしたい】

スライダー02

結果無理やり？な感じになりましたが良かったら参考にしてみてください。

スライダーの詳しい実装方法は以下の記事で紹介しておりますのでそちらをご覧ください。

【jQuery非依存】「swiper」でカルーセルスライダーを実装する

結論から申しますと、「見えない偽物のスライドを追加してあたかも左寄せされているように見せる」が今回の対処方法です。

今回は全部で7枚、PCは3枚ずつ、スマホは2枚ずつ表示される想定で作成します。

デモ

HTML


<div class="container">
	<!-- Swiper START -->
	<div class="swiper">
		<div class="swiper-wrapper">
			<!-- 各スライド -->
			<div class="swiper-slide"><img src="img/swiper_item_01.jpg" alt="スライド画像1"></div>
			<div class="swiper-slide"><img src="img/swiper_item_02.jpg" alt="スライド画像2"></div>
			<div class="swiper-slide"><img src="img/swiper_item_03.jpg" alt="スライド画像3"></div>
			<div class="swiper-slide"><img src="img/swiper_item_04.jpg" alt="スライド画像4"></div>
			<div class="swiper-slide"><img src="img/swiper_item_05.jpg" alt="スライド画像5"></div>
			<div class="swiper-slide"><img src="img/swiper_item_06.jpg" alt="スライド画像6"></div>
			<div class="swiper-slide"><img src="img/swiper_item_07.jpg" alt="スライド画像7"></div>
			<!-- 偽物スライド -->
			<div class="swiper-slide smt"></div>
			<div class="swiper-slide"></div>
		</div>
		<!-- ページネーション -->
		<div class="swiper-pagination"></div>
		<!-- ボタン -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
	<!-- Swiper END -->
</div>

ポイントは空タグ「<div class="swiper-slide smt"></div>」です。

PCは空タグが2つ、スマホは1つ必要になるので1つのみclass名(smt)を付けてスマホのときだけ消えるようにjQueryに記載します。

JS


$(function(){
	//スマホのときのみ<div class="swiper-slide smt"></div>を外す
	if (window.matchMedia('(max-width: 670px)').matches) {
		$('.smt').remove();
	}
	var mySwiper = new Swiper('.swiper', {
		slidesPerGroup: 2, //2枚ずつスライド
		slidesPerView: 2, //2枚表示
		speed: 1000, //切り替えのアニメーションスピード
		grabCursor: true, //ホバー時にカーソルを掴むマークに切り替える
		pagination: { //ページネーションを表示
			el: '.swiper-pagination',
			type: 'fraction' //分数で表示
		},
		navigation: { //「前へ/次へ」ボタンを表示
			nextEl: '.swiper-button-next',
			prevEl: '.swiper-button-prev'
		},
		breakpoints: { //ブレークポイント
			671: { //横幅が671px以上の場合
			slidesPerGroup: 3, //3枚ずつスライド
			slidesPerView: 3 //3枚表示
			}
		}
	});
});

ポイントは
if (window.matchMedia('(max-width: 670px)').matches) {
$('.smt').remove();
}
この部分です。

今回は横幅670px以下をスマホとしているのでifを用いて<div class="swiper-slide smt"></div>が消えるようにremove()を使用することでスマホのときだけ空タグが1つのみ追加されるように調整しています。

Swiperのオプションより先に読み込む必要があるため、上に書きましょう。

関連記事