sp_menu

【JavaScript】Swiperのeffect使っておしゃれなスライダーを実装する方法

【JavaScript】Swiperのeffect使っておしゃれなスライダーを実装する方法

今回はSwiperのオプション「effect」についてご紹介します。Swiperの「effect」を使えば、おしゃれで個性のあるスライダーを作成することができます。

「effect」について知りたい方は参考にしてください。この記事では以下のお悩みを解決します。

  • ・Swiperのeffectについて知りたい
  • ・Swiperのスライドをもっとおしゃれにしたい

1. Swiperについて

Swiperはスライダーを簡単に作成できるJavaScriptのプラグインです。軽量でjQueryに依存せずに作成できるのが特徴です。

またSwiperには様々なオプションがあり、スライダーの表示やアニメーションを自由にカスタマイズできます。

この記事ではSwiperの「effect」についてご紹介しますが、Swiperの導入方法や記事内で登場する「effect」以外のオプションについての詳しいは説明は割愛します。

Swiperの使い方がまったくわからないという方はSwiperの導入方法から「effect」以外でよく使われそうな基本的なオプションについて以下の記事で解説していますのでよろしければ参考にしてください。

【JavaScript】Swiperの導入方法と基本オプションについて解説

https://code-sq.com/swiper_basic_option/

2. effectとは

「effect」はスライドの切り替わる時のアニメーションやスライドの位置を変更できるSwiperのオプションです。「effect」には「slide」、「fade」、「cube」、「coverflow」、「flip」、「cards」、「creative」のオプションがあります。

初期値は「slide」になります。次に「effect」のそれぞれのオプションについてご紹介します。

2-1. slide

「slide」はスライドが1枚分の幅だけスライドするSwiperの基本的な動きになります。「effect」を指定しない場合は自動的に「slide」が適用されます。

const swiper = new Swiper('.swiper',{
  //slideを設定
  effect: 'slide',
});

See the Pen Swiper effect slide by CODE SQUARE (@Coffee1610) on CodePen.

2-2. fade

「fade」はスライドが切り替わる時にアクティブなスライドが徐々にフェードアウトし、同時に次のスライドがフェードインするアニメーションになります。

このエフェクトは前後のスライドは表示されず、常にスライド1枚の表示になります。

const swiper = new Swiper('.swiper',{
  //fadeを設定
  effect: 'fade',
});

See the Pen Swiper effect fade by CODE SQUARE (@Coffee1610) on CodePen.

2-3. cube

「cube」はスライドが立方体の1面のように表示され、スライドが切り替わる時に立方体自体が90度回転して次のスライドが現れる立体感のあるアニメーションです。

このエフェクトは立方体の一部として次のスライドが切り替わるため、画面には常にスライド1枚だけが表示されます。

const swiper = new Swiper('.swiper',{
　//cubeを設定
  effect: 'cube'
});

See the Pen Swiper effect cube by CODE SQUARE (@Coffee1610) on CodePen.

2-4. coverflow

「coverflow」は中央のスライドを大きく表示して前後のスライドを回転させて配置し、奥行きが強調された立体感のあるアニメーションです。

このエフェクトは、前後のスライドを表示することで奥行きが強調され、スライドを1枚だけ表示するよりも前後のスライドも一緒に表示するほうが立体感を表現できます。

const swiper = new Swiper('.swiper',{
　//coveflowを設定
  effect: 'coverflow'
});

See the Pen Swiper effect coverflow by CODE SQUARE (@Coffee1610) on CodePen.

2-5. flip

「flip」はスライドが切り替わるときに現在表示されているスライドが反転し、裏側に次のスライドが表示されるアニメーションです。

このエフェクトは次のスライドが反転して表示されるため、画面には常にスライドが１枚のみ表示されます。

const swiper = new Swiper('.swiper',{
　//flipを設定する
  effect: 'flip',
});

See the Pen Swiper effect flip by CODE SQUARE (@Coffee1610) on CodePen.

2-6. cards

「cards」はスライドをカードにように見せ、他のスライドと一緒に広がるような表示になります。このエフェクトは他のスライドも一部だけ表示されますが、中央のスライド１枚だけ全体が表示されます。

const swiper = new Swiper('.swiper',{
  //cardsを設定する
  effect: 'cards',
});

See the Pen Swiper effect cards by CODE SQUARE (@Coffee1610) on CodePen.

2-7. creative

「creative」はスライドを切り替えるときのアニメーションや前後のスライドの位置を自由にカスタマイズすることができるエフェクトです。設定はcreativeEffect内で前後のスライドの位置や動きに関する指定をします。

 const swiper = new Swiper('.swiper',{
  //creativeを指定
  effect: 'creative',
  creativeEffect: {
    //前のスライドの動き
    prev: {
      //位置
      translate:['-100%', 0, -100],
      //回転角度
      rotate: [0, 0, 30],
      //倍率
      scale: 0.8,
      //スライドの基準点
      origin: "left top"
      //不透明度
      opacity: 0.8,
      //スライドに影をつけるかどうか
      shadow: true,
    },
    //次のスライドの動き
    next: {
      translate:['-100%', 0, -100],
      rotate: [0, 0, 30],
      scale: 0.8,
      origin: "right top"
      opacity: 0.8,
    },
  },
  //ページネーションを設定
  pagination: {
    el:'.swiper-pagination',
  }
});

prev, next

「prev」はアクティブなスライドに対して前のスライド、「next」 は次のスライドの位置や動きを指定します。

translate

「translate」はスライドの位置をx軸、y軸、z軸で指定します。数値(単位はpx)または「%」で指定します。「%」で指定する場合は前後にシングルクォート「’」またはダブルクォート「”」で囲みます。(例:’50%’)

指定例：translate:[‘-50%’, 30, 30]

x軸:-50%、y軸:30px、z軸:30pxにスライドが位置します。

rotate

「rotate」はスライドの回転角度をx軸、y軸、z軸に指定します。

指定例：rotate:[0, 0, 60] 　

x軸:0度、y軸:0度、z軸:60度　 z軸を基準にスライドが60度回転します。

scale

「scale」はスライドの倍率を数値で指定します。

指定例：scale:0.5　

スライドの大きさを0.5倍にします。

origin

「origin」はスライドの「rotate」、「scale」の基準になる箇所を設定します。x軸は「left」、「center」、「right」、または「%」、y軸は「top」、「center」、「bottom」、または「%」で指定します。

「%」で指定する場合は以下のようにスライドの左上を基点としてx軸とy軸を指定します。

creativeのoriginを「%」で指定するときの基点とx軸とy軸

指定例１：origin:’left top’またはorigin:’0%, 0%’

スライドの左上が基準になります。

指定例２：origin: ‘50% 50%’またはorigin:’center center’

スライドの中心が基準になります。

opacity

「opacity」はスライドの不透明度を指定します。値は0(完全に透明)から1(完全に不透明)の範囲で指定します。

指定例：opacity:0.7　

スライドの不透明度が0.7になります。

shadow

スライドに影をつけるかどうかをtrueまたはfalseで指定します。

指定例：shadow:true

スライドに影をつける。

See the Pen Swiper effect creative1 by CODE SQUARE (@Coffee1610) on CodePen.

See the Pen Swiper effect creative2 by CODE SQUARE (@Coffee1610) on CodePen.

See the Pen Swiper effect creative3 by CODE SQUARE (@Coffee1610) on CodePen.

3. まとめ

今回はSwiperのオプション「effect」についてご紹介しました。「effect」を設定することでスライドのアニメーションや配置を変更できることがおわかりいただけたと思います。

今回と前回の記事でSwiperのよく使いそうなオプションをご紹介しましたが、Swiperにはご紹介した以外にもたくさんのオプションがあるので公式のサイトで調べて、ぜひご自身でも実装してみてください。

関連記事