今回はjQueryを使わずに簡単に写真などのスライドショーを実装できる「Swiper」を使ってみたいと思います。
Swiperは完全に無料でオープンソースです。（MITライセンス）
使い方は至ってシンプルですぐに使えます。公式のWebサイトの「Get Started」に行くと、とても丁寧に説明が書いてあります。
ここを見れば一発です。
以上。
なのですが、せっかくなので簡単に使い方を説明したいと思います。
Swiperを読み込む
公式サイトを見ると、読み込み方法は２つ（正確には３つ）あるようです。
- Swiper GitHubリポジトリからダウンロード
- NPMを使ってインストール
- CDNから読み込む
今回はCDNを利用していきたいと思います。
まずはindex.htmlファイルを作成しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Swiper Sample</title>
</head>
<body>
</body>
</html>
そして、Swiperを読み込みます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Swiper Sample</title>
<!-- SwiperのCSSファイル -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
<!-- SwiperのJSファイル -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>
</html>
SwiperのCSSをheadタグ内に、JSをbodyの閉じタグの前に追加しました。
これで読み込みは完了です。
レイアウト
次に、実際にスライドショーをする画像を読み込みます。
index.htmlファイルを以下のように変更してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Swiper Sample</title>
<!-- SwiperのCSSファイル -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
</head>
<body>
<!-- Swiper -->
<section class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/photo1.jpg"></div>
<div class="swiper-slide"><img src="img/photo2.jpg"></div>
<div class="swiper-slide"><img src="img/photo3.jpg"></div>
<div class="swiper-slide"><img src="img/photo4.jpg"></div>
</div>
<div class="swiper-pagination swiper-pagination-white"></div>
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</section>
<!-- SwiperのJSファイル -->
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
</body>
</html>sectionタグで囲ってある部分がスライドショーになります。
コピペしても大丈夫ですが、
imgタグのsrc部分は自身で準備した画像のパスに変更しておいてください。
スタイルの変更
このままでは画像が大きすぎたり画像がズレていたりするのでcssで調整します。
まずstyle.cssファイルを作成し、画像のサイズを整えましょう。
.swiper-container {
width: 80vw;
height: auto;
}
.swiper-slide img {
width: 100%;
height: auto;
}これで大抵の画像はちょうどいいサイズになるかと思います。「フルサイズにしたい」「もっと小さくていい」という方は自由にcssをいじってください。
最後にこのstyle.cssをindex.htmlファイルに読み込みます。
index.htmlファイルのheadタグ内のswiper.min.cssを読み込んだ次の行に記述してください。
<head>
<meta charset="utf-8">
<title>Swiper Sample</title>
<!-- SwiperのCSSファイル -->
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<link rel="stylesheet" href="style.css">
</head>ここまで記述が終わったら保存してブラウザで確認してみましょう。
こんな感じで1枚の写真のみ表示されていれば成功です。
４枚続いて表示されている場合はSwiperの読み込みに失敗している可能性があります。もう一度コードを確認してみましょう。
Swiperの初期化
最後に JavaScriptでSwiperを初期化する必要があります。 main.jsというファイルを新規作成して以下のようにコードを記述してください。
const mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
// ページネーション
pagination: {
el: '.swiper-pagination'
},
// ナビゲーション
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
})
そしてこちらも忘れずにindex.htmlに読み込みます。
記述場所だけ注意してください。記述場所はswiper.min.jsファイルの下の行です。
<!-- SwiperのJSファイル --> <script src="https://unpkg.com/swiper/js/swiper.min.js"></script> <script src="main.js"></script>
ここまで書けたらすべて保存してブラウザで確認してみましょう。
ナビゲーションボタンを押すと次の画像に切り替わるかと思います。
切り替わらない場合はきちんとSwiperが読み込まれているか、コードが間違っていないかもう一度確認してみましょう。
自動でスライドさせる
多くのウェブサイトでは、スライドショーは自動で切り替わるかと思います。
Swiperはオートスライドも簡単に実装できます。
main.jsファイルのSwiper内のオプションに
autoplay: {
delay: 2500,
disableOnInteraction: false,
},こちらを記述するだけです。
disableOnInteractionをfalseに設定すると、ユーザーインタラクション（スワイプ）後に自動再生が無効にならず、インタラクション後に毎回再起動します 。
全体のコードはこのような感じになります。
const mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal',
loop: true,
// オートプレイ
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
// ページネーション
pagination: {
el: '.swiper-pagination'
},
// ナビゲーション
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
})
他にもたくさんの機能がついています。
公式サイトに大量のデモが公開されているのでぜひ自分が実装したいスライドショーの機能を見つけて真似してみましょう。
また、より細かく調整したい場合は、公式のドキュメントを読んでみましょう。
英語で読みづらいかもしれませんが、GoogleChromeなら日本語翻訳である程度意味が理解できるかと思います。
ここまで書いておいてアレですが、バージョンが新しくなるとコードの記述方法が変わっていたり、特定の機能が使えなくなっていたりするので、ブログや質問サイトである程度の使い方を学んだあとは公式サイトを眺める習慣をつけてみましょう。