見出し画像
Photo by peishum

学習日記～Swiper.js～

あかり＠布団が友達

少しだけプログラミングの知識が増えた今、以前作った個人開発のWebサイトを作り直しているのですが、
その中でトップ画面にスライドショーを作りたくなりました。
イメージ写真が自動的に数枚左右に流れるアレですね（語彙力）。

私が作ったサイトは某クックパッドのようなレシピサイトだったので、
料理の写真をいい感じに流そうと思いました。

きっと、JavaScriptでやるんだろう。まぁ、プラグインとかあればそれ使ってもいいし。
（ググり中）
お、「Swiper.js」というプラグインが、jQueryにも依存しなくて、画像だけじゃなくて色んなものをオブジェクト化？してスライドショーすることができるんだな。
しかもカスタマイズしやすいときた。これはWebサイトには欠かせなさそうだぞ。使ってみよう。

というわけで、Swiper.jsの使い方を超初心者の私がなんとなくまとめていきます。


Swiper.jsの導入の仕方

さて、まずは導入の仕方ですね。
こういうプラグインの導入には2種類の方法があるみたいですね。

一つはソースコードをダウンロードして使用する方法。
もう一つは、CDNといって、WebサイトのURL？によりサイトから間接的にコードを読み込んで使用する方法ですね。
今回はお手軽にできるCDNを使用していきたいと思います。
CDNの注意点としては、サイトにアクセスして使用するため、オフライン環境では試せないという点です。

CDNでの導入方法ですが、
HTMLの<head>タグ内にCSSファイルの指定、
</body>タグの前に<script>タグによってSwiper.jsのファイルの指定が必要です。 

<head>
<link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css">​
</head>
<script>
<script src="//unpkg.com/swiper/swiper-bundle.min.js">
</script>
</body>

JSを別ファイルに記述して読み込むなら、これらの後に書いてくださいね。

HTML側の記述

Swiper.jsでスライドショーを動かすためには、HTMLで動かす要素を特定のクラスのdivタグで囲む必要があります。

<div class="swiper-container">
     <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="画像ファイル"></div>
     </div>
</div>

スライドショー全体のコンテンツをまとめるswiper-container、
スライドさせる要素やオプションをまとめるswiper-wrapper、
スライドさせる要素をまとめるswiper-slide。

とにかく、スライドさせたい画像や文章などをswiper-slideクラスの子クラスとして指定すればいいのです。
4つの画像をスライドさせたいのであれば、4つのswiper-slideクラスdiv要素ができるはずです。

例として以下を見てください。

//HTML
<div class="swiper-container">
     <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="/images/neko.jpg"></div>
          <div class="swiper-slide"><img src="/images/inu.jpg"></div>
          <div class="swiper-slide"><img src="/images/usagi.jpg"></div>
     </div>
</div>

JavaScript側での記述

それでは、実際に動かすためのJavaScriptの記述です。
簡単です。

Swiperオブジェクトを生成して、オプションを指定するだけ！

var mySwiper = new Swiper ('.swiper-container', {
　　　pagination: {
　　　el: '.swiper-pagination',
　　　},
　　　autoplay: {
　　　delay: 5000,
　　　},
　　　speed: 2000,
　　　pagination: {
　　　el: '.swiper-pagination',
　　　clickable: true,
　　　},
　　　slidesPerView: 'auto',
})

以上です！

これだけで動きます。
中カッコの中の記述はオプションの指定です。

例えば、autoplay: { delay:5000, },
という記述は、スライドショーの画像を5秒ごとに自動で切り替えるというオプション指定です。
speed: 2000,
というのは、切り替える速さを2秒に指定するということですね。

動かないよって人ーー！

私も、最初全く動きませんでした...。その時の原因を書いておきます。
一番疑うべきは、ファイル指定のミス。
上にも書きましたが、Swiper.jsを使うためには、
Swiper.jsのJavaScriptファイルと、CSSファイルを二つとも指定する必要があります。
いくつかJSやCSSのライブラリやファイルを指定している人は、記述しているつもりでもできていない時があります。気を付けてくださいね。

それでも動かない人は、クラス名が間違っているとか、スライドするコンテンツを挟む場所を間違えているとかあると思います。
一からコードを見直してみてみましょう。

Swiper.js、もっと勉強します！

Swiper.js、カスタマイズ性もあり、Webサイトを作る際にはかなり重宝しそうなライブラリです！
オプションもかなりたくさんあるようで、まったく把握しきれていません。

便利なので、色々いじってみて使い方に慣れようと思います。

駄文、失礼しました。
自分のために書き残したので、かなりテキトーです。もっと人に説明できるくらいの語彙力と理解力が必要だとひしひしと感じる。
もっともっとプログラミング勉強します。

それでは、おやすみなさい。

この記事が気に入ったらサポートをしてみませんか？