【詳説】Swiperの導入方法を懇切丁寧に説明してみた。公式ホームページの日本語訳含【画像・図解あり】
こんにちは、りさです。
ちょいとSwiperを導入してみたい、という方のために導入方法を手短、でも丁寧に解説してみました。
公式ホームページを見れば大体できるんですが、どうしても英語ムリ！という方は続きを読んでいただければ、5分以内に導入できます。
- HTMLファイルに必要なファイルを読み込む
- swiperを表示するためにHTMLコードを書く
- CSSスタイルを追加する
- JavaScript コードを追加する
- スクロール用部品を選ぶ
- カスタマイズについて、（ちょこっとだけ）
- 参考
HTMLファイルに必要なファイルを読み込む
公式ホームページでは、a~cまで複数の読み込み方法が紹介されていますが、今回はaを採用します。
下の4行を<head></head>内に追加する
swiperを表示するためにHTMLコードを書く
下が公式ホームページであらかじめ用意されているものです。
下のコードを<body></body>内に追加する
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
スライドの中身をいれる
この段階では、スライドの中身が「Slide 1」「Slide 2」「Slide 3」となっているので、中身を入れたいと思います。今回は分かりやすいので画像を入れます。
ネットで拾ってきた画像を3枚用意して、この部分（↓↓）に入れてみました。
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/img1.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/img2.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/img3.jpg" alt=""></div>
</div>
※3つのスライドの下にあった「．．．」は要らないので消しておきました。
フォルダの階層はこんな感じです。
CSSスタイルを追加する
<head></head>内にスタイルシートを追加します。
別途「style.css」を作成しても大丈夫です。
公式ホームページのコードをコピペします。こんな感じです。↓↓
<head>
<!-- 省略 -->
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
JavaScript コードを追加する
これもコピペで大丈夫です。
下のコードを</body>（bodyの閉じタグ）の直前に追加します。
<script>
var mySwiper = new Swiper('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
一旦ブラウザで確認してみると、こんな感じになってます。
基礎部分はできているのですが、右側を見てみるとスライドをスクロールするための部品がすべて表示されてしまっています。
次は、スクロール用の部品をどれか一つにするために、不要な部分をコメントアウトまたは削除します。
スクロール用部品を選ぶ
点（丸）表示を選ぶ場合
一番上のスクロール部品を選びます。
下の二つはコメントアウトまたは削除します。
<!-- If we need pagination -->
<div class="swiper-pagination"></div><!-- 点（丸）表示 -->
<!-- If we need navigation buttons -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> --><!-- コメントアウト -->
<!-- If we need scrollbar -->
<!-- <div class="swiper-scrollbar"></div> --><!-- コメントアウト -->
ブラウザを確認すると、
＜＞（前・次ボタン）ほ選ぶ場合
二番目のスクロール部品を選びます。
他の二つはコメントアウトまたは削除します。
<!-- If we need pagination -->
<!-- <div class="swiper-pagination"></div> --><!-- コメントアウト -->
<!-- If we need navigation buttons --><!-- ＜＞（前・次ボタン） -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<!-- <div class="swiper-scrollbar"></div> --><!-- コメントアウト -->
ブラウザを確認すると、
スクロールバーを選ぶ場合
三番目のスクロール部品を選びます。
他の二つはコメントアウトまたは削除します。
<!-- If we need pagination -->
<!-- <div class="swiper-pagination"></div> --><!-- コメントアウト -->
<!-- If we need navigation buttons -->
<!-- <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> --><!-- コメントアウト -->
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div><!-- スクロールバー -->
ブラウザを確認すると、
カスタマイズについて、（ちょこっとだけ）
現段階では、デフォルトで縦スクロールになっています。
<script></script>内のコードを見ると、
direction: 'vertical',
「direction（方向）」：「vertical（垂直）」となっています。
そこで、「vertical（垂直）」を「horizontal（水平）」としてみます。
direction: 'horizontal',
ブラウザを確認すると、
スクロール部品が下に配置されていて、スクロール方向も水平になっていることが分かります。
これで基本的な導入は以上です。
参考
こちらの記事では、いろいろなカスタマイズ例を紹介しているので、もっといろいろカスタマイズしてみたい、という方の参考になると思います。
<ではまた、Salut!>
