今回はJavascript関連のお話です。自分のサイトを作りたいと思っている人もいるでしょうし、請負で何か企業のサイトを構築しているなんて人も見ているかもしれませんので、わかりやすく端的に書いていきたいと思います。

フロントエンドをやっていると必ずと言っていいほど通るのが写真なんかがスライドショーのように表示される画面を作らないといけないという時。Javascriptで実装するのがポピュラーなやり方ですが、一からコードを書いていると意外とコレが結構大変です。そんなスライダー実装の作業を超超超効率化できるのが、swiper.jsというjsのライブラリなのです。

準備

Swiper.js公式サイト

上のリンクから必要なファイルをダウンロードしてください。今回使うのは、

・swiper.min.js

・swiper.min.css

の二つです。また、Swiper.jsはjQueryを必要としないので、非常に軽く動作することでも定評です。もちろんjQueryをインポートしておいても構いません。

1.htmlにインポートする

ダウンロードできたら、

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

タグでhtmlに読み込みましょう。srcはディレクトリによって各自変更してください。

2.htmlのbodyに以下を追記

<div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide"><img class="slide-pc" src="../assets/img1.png"><img class="slide-smartphone" src="../assets/img2.png"></div>
              <div class="swiper-slide"><img class="slide-pc" src="../assets/img1.png"><img class="slide-smartphone" src="../assets/img2.png"></div>
              <div class="swiper-slide"><img class="slide-pc" src="../assets/img1.png"><img class="slide-smartphone" src="../assets/img2.png"></div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-scrollbar"></div>
          </div>

上の文がスライダーの部分にあたります。画像のimgタグのsrcは好きなものに変えてください。
div class=”swiper-slide”タグを追加すればスライダーの数を自由に変更可能です。

3.javascriptに以下のコードを追記

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  parallax: true,
  speed: 600,
  autoplay: 4000,
  loop: true,
});

javascriptファイルに以上の文を追記します。もちろんこのファイルもhtmlにインポートしておいてください。htmlにスクリプトタグで直書きでも構いません。

解説を入れると、スライダーの細かい設定を書いていると思ってください。

speedはスライドの速さ。autoplayをtrueにすれば自動でスライダーが動きます。loopをtrueにすると、スライダーの中身がループするようになります。他にも細かい設定ができますが、おそらく使うのはこの辺くらいだと思います。

まとめ

今回はSwiper.jsを使ってスライダーを簡単に実装してみました。できましたでしょうか？スライダーを頑張って自力で作った後これを見つけて私は絶望しました。以上