メニュー

【Swiper.js】超便利！レスポンシブスライダー

こんにちは、webの佐野です。
年末の慌ただしい時期になってきましたが、皆様いかがお過ごしでしょうか。

さて今回はタイトルにもある、超万能JSスライダーの【Swiper】を、簡単なカスタマイズと併せて紹介したいと思います。

普段使っているスライダーがレスポンシブ対応されていなかったり、スライダープラグインがたくさんありすぎて何使えばいいかわからない！と言う方がいらっしゃれば、ぜひ一度使ってほしいプラグインです。

もくじ

  1. Swiperの特徴
  2. Swiperの導入方法
  3. Swiperの実装
  4. ナビゲーションの変更方法
  5. 最後に

Swiperの特徴

Swiperには下記の様な特徴があります。
・軽量
・jQueryを使用しない
・レスポンシブ対応している
・オプションが豊富

色々なスライダーがありますが、jQueryを使用していないプラグインは珍しいですね！
Swiperは単独で動くので、競合などもなく導入しやすいプラグインとなっています。

Swiperの導入方法

導入については、必要なファイルを読み込むだけで完了です。
読み込み方法は以下の2つから好きな方を選んでください。
・ダウンロードしたファイルを作業フォルダに設置して読み込む
・CDNから読み込む

今回はファイルをダウンロードしながら進めます。

まずは、公式サイトからSwiperをダウンロードしましょう。

Swiper公式サイト

ダウンロードしたら必要なファイルは以下の二つになります。
・swiper.js
・swiper.css

どちらも同梱されているminファイルでも可です。

こちらを作業フォルダに設置して、htmlファイルで読み込みます。
今回の作業フォルダは構成は以下の様にしています。
・index.html
・css/swiper.css
・js/swiper.js

Swiperの実装

では、さっそく実装していきたいと思います。
先に実装後のイメージはこちらになります。

See the Pen yGaVQW by otwo (@otwo) on CodePen.

そしてこちらが、index.htmlの内容になります。

<!DOCTYPE html>
<html>
<head>
　
　
　

  <style>
    .swiper-container{
      width: 100%;
      height: 300px;
      background-color: #b1c7aa;
    }
  </style>
</head>
<body>
  

    
    

      
コンテンツ1
ここにテキストや画像など好きにコーディングしてください。

      
コンテンツ2
ここにテキストや画像など好きにコーディングしてください。

      
コンテンツ3
ここにテキストや画像など好きにコーディングしてください。

    


    
    


    
    

    

  


  <script>
    var mySwiper = new Swiper ('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      }
    });
  </script>
</body>
</html>

とっても簡単ですね！
もちろんループやオートプレイと言ったスライダーに必要なオプションは一通り揃っているので要件に合わせて追加してください。
こちらのサイトが細かくオプション等をまとめてくださっているので、参考までに共有しておきます。

swiper.js使ってみたからそのオプションについて

ナビゲーションの変更方法

上の実装だけでも十分にスライダーなのですが、前後のボタンやページネーションがデフォルトのままで少し寂しく感じます。
なので、オリジナルのデザインに加工してみましょう！

矢印の変更方法

左右のスライドボタンはCSS側でデザインされているのでCSSを上書きしてデザインを変更します。
ここでは別の画像に書き換えて対応します。

See the Pen wRzqOd by otwo (@otwo) on CodePen.

【CSS】

  <style>
    .swiper-container{
      width: 100%;
      height: 300px;
      background-color: #b1c7aa;
      color: #fff;
    }
    .swiper-button-prev{
      background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_left.png);
    }
    .swiper-button-next{
      background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_right.png);
    }
  </style>

追記がCSSのみなので、CSSだけ記述しています。
.swiper-button-prev
.swiper-button-next
こちらのクラスを上書するだけなので簡単です！

ページネーションの変更

ページネーションについても同様に、CSSで円のサイズや色の変更ができます。
ただ、これについては画像ではないので、画像等へデザイン変更する場合に少しコードを追加する必要があります。
コードはこちらです。

See the Pen ebdeOm by otwo (@otwo) on CodePen.


今回は画像ではなく、aタグを使っていますが、下のコードでaタグを生成している箇所(76,78行目)にimgタグを指定すると画像で表示されます。
また、SwiperはjQueryなど他のプラグインに依存せず単独で動くので本来必要ありませんが、ナビゲーションを変えるにあたり、処理の組み易さからここではjQueryを利用しています。

<!DOCTYPE html>
<html>
<head>
　
　
  
　

  <style>
    .swiper-container{
      width: 100%;
      height: 300px;
      background-color: #b1c7aa;
    }
    .swiper-pagination-original{
      width: 100%;
      position: absolute;
      top: 250px;
      left: 0;
      text-align: center;
      margin: auto;
      z-index: 10;
    }
    .swiper-pagination-original a{
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: #fff;
      margin: 0 5px;
    }
    .swiper-pagination-original a.active{
      background-color: #000;
    }
    .swiper-button-prev{
      background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_left.png);
    }
    .swiper-button-next{
      background-image: url(https://www.otwo.jp/blog/demo/swiper/arrow_right.png);
    }
  </style>
</head>
<body>
  

    
    

      
コンテンツ1
ここにテキストや画像など好きにコーディングしてください。

      
コンテンツ2
ここにテキストや画像など好きにコーディングしてください。

      
コンテンツ3
ここにテキストや画像など好きにコーディングしてください。

    


    
    


    
    

    

  


  <script>
    var mySwiper = new Swiper ('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on:{
        slideChangeTransitionStart: function(idx){
          // ページネーションの切り替え
          swiperNaviIndex();
        }
      }
    });

    // スライド要素数分のナビゲーションを生成
    $(".swiper-slide").each(function(i){
      if(i==0){
        $(".swiper-pagination-original").append('');
      }else{
        $(".swiper-pagination-original").append('');
      }
    });

    // 生成したボタンに処理追加
    $(".swiper-pagination-original a").each(function(i){
      var _self = $(this);
      $(this).click(function(){
        // 対応コンテンツへスライド
        mySwiper.slideTo(i);
        // ページネーションの切り替え
        swiperNaviIndex();
        return false;
      });
    });

    // ページネーションの切り替え処理
    function swiperNaviIndex(){
      // 現在、activeクラスを削除
      $(".swiper-pagination-original a.active").removeClass("active");
      // 移動したコンテンツの対応ナビゲーションへactiveクラスを付与
      $(".swiper-pagination-original a").eq(mySwiper.realIndex).addClass("active");
    }
  </script>
</body>
</html>

細々と変更点はありますが、初期実装されているページネーションを使用せずに、自作した様なイメージになります。
大まかな変更箇所としては下記の4つです。
・ページネーション用にスライドコンテンツ分の要素を用意する(白黒の要素)
・用意した要素のレイアウトをCSSで整える
・スライドイベント時にページネーションのアクティブが変更される様にイベントを設定する
・ページネーション要素のクリック時にページネーションのアクティブが変更される様にイベントを設定する

Swiperは何かアクションが起こった時にイベントが仕込めるよう、callback関数も豊富に用意されているので素敵です！

スライドの開始位置を変更したい

要件として少ないかもしれませんが、スライドの開始位置をデフォルト(1番左)から変更したいとなった場合の指定が見当たらなかったので、こちらも自前で処理を組みました。

See the Pen JwROzL by otwo (@otwo) on CodePen.


コードがこちら。
【JS】

  <script>
    var mySwiper = new Swiper ('.swiper-container', {
      speed: 0,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on:{
        slideChangeTransitionStart: function(idx){
          // ページネーションの切り替え
          swiperNaviIndex();
        }
      }
    });
    mySwiper.slideTo(1);
    mySwiper.params.speed = 300;

    // スライド要素数分のナビゲーションを生成
    $(".swiper-slide").each(function(i){
      if(i==1){
        $(".swiper-pagination-original").append('');
      }else{
        $(".swiper-pagination-original").append('');
      }
    });

    // 生成したボタンに処理追加
    $(".swiper-pagination-original a").each(function(i){
      var _self = $(this);
      $(this).click(function(){
        // 対応コンテンツへスライド
        mySwiper.slideTo(i);
        // ページネーションの切り替え
        swiperNaviIndex();
        return false;
      });
    });

    // ページネーションの切り替え処理
    function swiperNaviIndex(){
      // 現在、activeクラスを削除
      $(".swiper-pagination-original a.active").removeClass("active");
      // 移動したコンテンツの対応ナビゲーションへactiveクラスを付与
      $(".swiper-pagination-original a").eq(mySwiper.realIndex).addClass("active");
    }
  </script>

変更点としては以下の3つです。
・スライドスピードを0に変更(3行目)
・slideToメソッドを使って指定したスライドまで移動(15行目)
・スライドスピードを300(初期値)を変更(16行目)

上の例では自作のページネーションを使用している為、初期のアクティブ要素を変更していますが(20行目)、標準機能を使用していれば何もする必要はありません。

最後に

レスポンシブ対応されており、パラメーターも豊富で何かと使い勝手が良いSwiperの紹介をさせていただきましたが、いかがでしたでしょうか？
自作スライダーも良いですが、動作検証や拡張などを考えると時間が掛かりすぎてしまうなどネックな点が多いです。
なので、Swiperや他の有名なプラグインを利用してみて、お気に入りのスライダーを見つけてみてください！

それではまた！

この記事をシェアする

  • twitter
  • facebook
  • Google+
  • B!はてブ
  • pocket

この記事の関連記事

Web制作
2022.4.27
幾何学な動きをするパーティクルの作り方【JavaScript / 学習用】
Web制作
2021.11.30
マウスカーソルを追従するマウスストーカーを自作する【JavaScript / jQuery】
Web制作
2021.4.30
初心者でも知っておきたいJavaScriptの便利なショートハンド

このカテゴリーのおすすめ記事

Web制作
2019.3.29
【前編】Raspberry Pi Zero WHを使ってSESAMEのスマートロックをICカードで解錠する
Web制作
2018.3.22
PHPExcelでファイル作成から値の取得

人気記事ランキング

デザイン
2015.9.14
【Photoshop】ソーシャルゲームイラストの描き方＆色収差
Web制作
2019.9.30
Canvasを使ってお絵描きと画像の保存をしてみる【HTML5】
Web制作
2019.12.24
【保存版】CSSアニメーションの種類・使い方・サンプル
トップへ戻る

CONTACT

ゲーム開発、Webサイト制作に関するご相談等ございましたら、お気軽にお問い合わせください。

ゲーム開発に関する
お問い合わせはこちら

Webサイト制作に関する
お問い合わせはこちら