ゆろぐ

ゆるく、ろぐる。独学フロントエンドエンジニアの技術ブログ

【Swiper】逆再生を実装する２つの方法とそれぞれの違いを解説

作者: LCW_buffaro投稿日: カテゴリー: JavaScript、Swiperタグ: , , , 【Swiper】逆再生を実装する２つの方法とそれぞれの違いを解説 へのコメントはまだありません

少しお久しぶりの更新になってしまいました。

実は先週メインのPC（mac book pro）の基盤がやられてしまい、Appleサポートへの連絡やら修理のための持ち込み（自宅から車で1時間半のお店）のために動き回ってました。

まぁ、結果からすれば基盤が壊れてしまっているので、修理に11万ちょっと、バッテリーも劣化しているのでバッテリーの交換も含めると合計16万円くらいかかるそう・・・。

なので修理せずに新しくmac miniでも買おうか悩んでます。

とりあえず古くてももしもの時のためにサブでmac book pro2017を保管しておいてよかった。

って前置きは置いておいて早速本題のSwiperの実装についてご紹介していきましょう。

逆再生（右から左）の自動再生がしたい

アパレル系を含む、商品画像などをメインにしたデザインのWEBサイトの場合、スライダーを多用したり、複数のスライダーを縦に並べて再生方向を逆にすることがあります。

例えばここ→https://new-design.jp/

このサイトがSwiperを使っているかは確認していませんが（おそらく使ってない）、こんな感じの左右入れ違いになっているようなスライダーをSwiperを使って作ってみようって話です。

①Swiperで基本のスライダーを作る

Swiperの実装方法は色々なところに詳しく書かれているので、簡単な実装手順だけご紹介しておきます。

  1. CDN等でSwiperを読み込み
  2. HTMLを作成
  3. jsファイルで動きの調整

CDN等でSwiperファイルの読み込み

nodeなどを使って開発環境を作っている人はnpmでインストールしていただくとして、ここでは初学者向けにCDN実装の方法を紹介していきます。

公式サイトにも掲載されていますがCDNで読み込む場合は下記のような記述をしてください。（最新のバージョンは公式サイトをチェックするようにしてください）

HTML
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
/>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
HTML

どこに記述するかって？Wordpressのテーマ開発であればheader.phpの中でwp_head()よりも前に書いておくといいと思います。（理想はwp_enqueue_styleやwp_enqueue_scriptを使ってwp_head()にフックさせる方がいいですが・・・）

これでSwiperを使う準備はOKです。

Swiper用のHTMLを作成

WordPressを使っている人の場合、同じスライダーを作るプラグインとして「slick.js」を使っている人も多いと思います。slick.jsはjQueryに依存しますが、SwiperはjQueryがなくても動くのでWordpress以外のサイト構築でもよく使います。

slick.jsを使う時は特にHTMLの構造は気にしなくても、スライダーにしたいところに特定のクラスをつけてjs側で制御しますが、swiperの場合は基本となるHTML構造を先に作っておきます。

HTML
<!-- Slider main container -->
<div class="swiper">
  <!-- 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>
HTML

これが基本のHTML構造です。

11行目〜19行目まではページネーションや左右ボタン、スクロールバーの表示用なのでなくても動きます。（自動再生であればどれも不要なので、今回は使いません）

基本的な使い方としては、.siwper-slideの要素の中に画像やコンテンツなど、スライダーの中身を一つずつ格納していくように使います。

jsでスライダーを制御する

HTMLができたら次にjsで実際にスライダーを制御していきます。

JavaScript
const swiper = new Swiper('.swiper', {
  // Optional parameters
  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',
  },
});
JavaScript

先ほど作った基本的なHTMLに対してのコードなのでクラスや内容は適切書き換えましょう。

デモ

ここまでで実装したデモのスライダーです。

ある程度わかりやすく簡単なCSSを作ってあります。

②自動再生をさせる

次に自動再生をつけてみましょう。

自動再生をさせるにはjsでautoplayの設定をつけるだけです。

JavaScript
const swiper = new Swiper('.swiper', {
  // Optional parameters
  loop: true,
  
  autoplay: {     //追記
    delay: 2000,   //追記
  }, 

  // 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',
  //},
});
JavaScript

9行目以降のページネーションなどの部分は必要なければ削除してOKです。（わかりやすいようにコメントアウトしています）

autoplayと一緒に設定したdelayはms（ミリ秒）でスライドする間隔を設定しています。今回は2000なので2秒に1回すライドが動くような仕様になっていますね。

ゆっくり流れ続ける仕様にする

求めているのはゆっくり流れ続けるスライダーなので、その調整をしつつ余計な左右の矢印を消してみましょう。

HTML
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>
HTML
JavaScript
const swiper = new Swiper('.swiper', {
  loop: true,
  speed: 3000, // 追記¥

  autoplay: {
    delay: 0,   // 2000を0に変更
  }, 
});
JavaScript

HTMLでは不要な部分（ページネーションや矢印）のHTMLタグを削除し、jsではspeedを追加してdelayの値を変更しました。

下記のデモではわかりやすくスライダーの色を変更しています。

余分なものをなくして流れ続けるようになりましたが、アニメーションの速度に変化があるので、これを等速にすることでより流れ続けるような滑らかなスライダーにしてみましょう。

対応方法は簡単で、対象となるswiperの.swiper-wrapperにtransition-timing-function: linear;というcssを追加するだけです。

③逆再生にしてみる

swiperで逆再生にする方法としてよく紹介されているのがreverseDirection: trueを使う方法です。

jsのautoplayの中で設定をします。

JavaScript
const swiper = new Swiper('.swiper', {
  loop: true,
  speed: 5000,

  autoplay: {
    delay: 0,
    reverseDirection: true // 追記
  }, 
});
JavaScript

たったの1行追加するだけで簡単に逆再生になりました。

これで逆再生が実装できましたが、実はSwiperの逆再生には別の方法もあります。

dir属性を使って逆再生にする方法

先ほどの方法ではjsを変更して逆再生をしましたが、単純な逆再生であればHTMLのdir属性を追加するだけでも実装できます。

先ほど紹介した方法ではうまく実装できない場合や、少しアニメーションのカクツキが気になる場合、複数のスライダーを一つのjsで管理したい場合などはこっちの方が管理しやすいかと思います。

HTML
<div class="swiper" dir="rtl">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
  </div>
</div>
HTML

dir="rtl"というのは、普段の横書き（左から右）ではなく日本語の縦書きの時のような「左から右」に読む言語などに使う属性です。そのため普段とは逆の流れになるってわけです。

二つの自動再生の違いは？

jsのreverseDirection: trueを使った方法と、HTMLのdir="rtl"を使った方法の大きな違いは、スライドの並び順です。

わかりやすく二つを並べてスライドの幅を変えたものがこちらです。

dirを使うと右から左に「1,2,3」と並んでいますが、jsで再生を逆にすると「3,2,1」という順番に並んでいるのがわかります。

SwiperのreverseDirection: trueはあくまでも「逆再生」なので、スライドの並び順はいつも通りで左から右に1,2,3と並んでいて、それが左から右に流れるので順番が大切になる場面では問題が生じます。

あらかじめHTML側で逆に並び替えておけばいいという問題ではありますが、保守性を考えるとdirを使った方がいいですね。

並び順を特に気にしないギャラリー的な使い方であればどちらでもOKですが、並び順を気にする場面ではしっかりと使い分けるようにしましょう。

まとめ

一見動作だけをみるとどちらを使っても問題がないように思えますが、しっかりとみてみると微妙な違いがあることは今回のことに限りません。

厳密に言えば中での処理が違うので、表示速度やサーバーへの負荷につながることもあるので、フロントエンドであってもできるだけ「なぜ動くのか？どのように動いているのか？」といった原理のところまで考えられるようになりたいものですね。

【Swiper】逆再生を実装する２つの方法とそれぞれの違いを解説

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

トップへ戻る