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

ひぐま
ひぐま

Swiperとは

jQueryに依存せずスライダーが実装できる高機能なスライダープラグインです。

jQueryがなくても動作するので、他のjQueryを使ったプラグインと喧嘩しないため、スライダー作成する際はとても重宝します。
下記のデモのようなスライダーを実装してみます。

デモ

ライブラリを読み込み

まずは下記よりSwiperのダウンロードサイトから必要なファイルをダウンロードしましょう。

GitHub

「master」と書いてあるボタンをクリックするとプルダウンがひらきますので、任意のバージョンを選択します。

今回はSwiper 5を選択し、ver.5.4.5をダウンロードして使用します。
※バージョンによってやり方が変化していますので、気を付けてください。

必要なファイルはpackageのなかにある、
CSSから「swiper.css」または「swiper.min.css」と、
JSのなかから「swiper.js」または「swiper.min.js」のどちらか二つです。

 <link rel="stylesheet" href="../common/css/swiper.css">
 <script src="../common/js/swiper.js"></script>

※ご自身のファイルのパスに合わせることをお忘れなく！

またはCDNで読み込み

ファイルを残さずに実装したい人は、CDNでも読み込みができます。

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/css/swiper.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/5.4.5/js/swiper.js"></script>

スプリクトは下記のように書きます。

window.onload = function() {
	var mySwiper = new Swiper ('.swiper-container', {
		slidesPerView:1.5,//画像を何枚表示するか
		spaceBetween: 10,//何ピクセル画像の間隔をあけるか
		centeredSlides : true,//見切らせたい場合メイン画像をセンターにもってくるか
		//自動再生する場合
		autoplay: {
		delay: 3000, //3秒後に次の画像に代わる
		},
		loop: true,//最後の画像までいったらループする
		//ページネーションをつける場合
		pagination: {
		 el: '.swiper-pagination',
		 type: 'bullets',
		 clickable: true,
		},
		//左右のナビゲーションをつける場合
		navigation: {
		 nextEl: '.swiper-button-next',
		 prevEl: '.swiper-button-prev',
		}
	});
}

※他にjQueryを使う場合は
$(function(){
})
で括ってください

slidesPerViewには小数点が使えます。整数で設定すると画像がそのままの大きさでスライドしますが、前後の画像をチラみせしたい場合、1.5にすることでデモのような表示が可能になります。

HTML

今回使用しているHTMLはこちら

<main>
    <div id="slide">
        <div class="swiper-container">
            <ul class="swiper-wrapper">
                <!-- スライドする画像 -->
                    <li class="swiper-slide"><p><img src="img/swiper/swiper01.jpg" alt="イギリス"></p></li>
                    <li class="swiper-slide"><p><img src="img/swiper/swiper02.jpg" alt="わんちゃん"></p></li>
                    <li class="swiper-slide"><p><img src="img/swiper/swiper03.jpg" alt="レトロな写真"></p></li>
                    <li class="swiper-slide"><p><img src="img/swiper/swiper04.jpg" alt="パンジーとスクール"></p></li>
                    <li class="swiper-slide"><p><img src="img/swiper/swiper05.jpg" alt="切手"></p></li>
                <!-- /スライドする画像 -->
            </ul>
            <div class="swiper-button-prev"></div><!-- 前のページ -->
            <div class="swiper-button-next"></div><!-- 次のページ -->
            <div class="swiper-pagination swiper-pagination-white"></div><!-- ページネーション(dots)-->
        </div>
    </div>
</main>

基本的に必要なのは「swiper-container」「swiper-wrapper」「swiper-slide」です。

※swiper-button-prev～swiper-paginationの要素たちは、矢印、ページネーション(dots)の実装が必要ない場合は任意で省いてください。

CSS

CSSは下記です。

	header{ top:0; z-index:100; }
	main{ width:1024px; }
	#slide{ margin:0 auto; }
	.swiper-container{ witdh:100%; max-width:650px; }
	.swiper-slide-next,.swiper-slide-prev{ opacity: 0.5; }
	.swiper-button-prev::before,.swiper-button-next::before {
		font-size:32px;
		color:#fff;
		font-weight:900;
	}
	.swiper-button-prev::before { content: "←"; }
	.swiper-button-next::before { content: "→"; }

.swiper-slide-next,.swiper-slide-prevは前後の画像になります。opacity: 0.5で半透明にしています。

デフォルトは水色のナビゲーションが表示されますが、11,12行目で疑似要素を使用しカスタマイズしています。

公式サイトには様々なスライダーの実装デモが紹介されていますので、そちらも是非チェックしてくださいね。

swiper公式

関連記事