フリーランス｜WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 I R O D O R I D ESIGN
【Swiper】エフェクトの種類とサンプルコード RELEASE / 2024.7.15 UPDATE / 2024.07.13 Swiper エフェクト コピペ サンプルコードWEBサイト制作で欠かすことの出来ないスライドショー。その中でも人気のある「Swiper」。簡単にスライドショーを作ることが出来、かつ高性能のライブラリです。今回の記事では、「Swiper」に用意されているエフェクトの種類とカスタマイズを方法をご紹介したいと思います。
この記事の目次を表示
- 1 Swiperとは
- 2 Swiperのエフェクトの種類
- 2.1 fade
- 2.2 cube
- 2.3 coverflow
- 2.4 flip
- 2.5 cards
- 2.6 creative
- 3 まとめ
Swiperとは
「Swiper」とはスライドショーを簡単に実装することが出来るJavaScriptのプラグインです。他のスライドショーを実装出来る「slick」や「bxSlider」は使用するためにプラグインの他に、「jQuery」の読み込みが必要になりますが、「Swiper」は「jQuery」を必要としないため、動作が軽量になっています。
Swiperのエフェクトの種類
「Swiper」にはスライダーの切り替えアクションのエフェクトを指定することが出来ます。用意されているエフェクトはこちら。
- fade
- cube
- coverflow
- flip
- cards
- creative
それぞれのエフェクトがどういうものかと実装サンプルを見ていきましょう。
fade effect: 'fade',「fade」は、フワッしながら切り替わり方をするエフェクトです。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
cube effect: 'cube',「fade」は、立体的な箱をクルっと回転させているような切り替わり方をするエフェクトです。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
coverflow effect: 'coverflow',「coverflow」は、奥行き感がある切り替わり方をするエフェクトです。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
「coverflow」は3枚同時に表示する場合にその効力を発揮するエフェクトだと思います。逆に言えば、それ以外の枚数での表示だと少し違和感があるため、使用する場面は限られると思います。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
flip effect: 'flip',「flip」は、カードの表裏が反転するような切り替わり方をするエフェクトです。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
cards effect: 'cards',「cards」は、たくさんあるカードを順番に後ろに送っていくような切り替わり方をするエフェクトです。
実装サンプルはこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
creative effect: 'creative',「creative」を指定することで、自分でオリジナルのエフェクトを作ることが出来ます。
ここではいくつかご紹介したいと思います。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
いかがでしたか？「Swiper」には多くのエフェクトが用意されています。数値や表示枚数を変更するだけでもエフェクトの印象は変わります。また、creativeを使うことで独創的なエフェクトを作り出すことも可能です。是非、いろいろ試してみて自分だけのスライダーを作ってみて下さい。
関連記事一覧
【初心者向け】Swiperの基本的な使い方WEBサイト制作で欠かすことの出来ないスライドショー。その中でも人気のある「Swiper」。簡単にスライドショーを作るこ […]
【Swiper】横に一定速度で流れ続ける無限ループスライダーの作り方WEBサイトを見ていると横方向に一定速度で流れ続けるスライダーを見たことはありませんか？一見難しそうなスライダーですがス […]
【Swiper】slideToメソッドがズレる原因と解決方法WEBサイト制作で頻出するスライダー。そのスライダーを簡単に作ることが出来る人気の「Swiper」。多くのオプションやメ […]
【コピペOK】画像にホバーした時のCSSアニメーション20選Webサイトにはブログのサムネイル画像等、画像にリンク設定することがよくありますね。デザイナーからホバーアニメーションが […]
【コピペOK】WEBデザインで使えるシンプルなボタンデザイン18選コピペですぐに使えるCSSで作るの使い勝手抜群なシンプルなボタンデザインを18種類集めてみました。 なお、ボタンにマウス […]
【Contact Form 7】Datepickerで日付選択をする方法WordPressで簡単にお問い合わせフォームを作ることが出来る人気プラグインの「Contact Form 7」。この記 […]
【コピペOK】ボタンにホバーした時のCSSアニメーション15選ボタンにホバーした時のアニメーションがいつも同じになっているコーダーも多いのではないでしょうか。デザイナーからホバーした […]
【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方この記事の目次を表示1 【jQuery】Slickスライダーで拡大しながら切り替わるスライダーの作り方1.1 実装例1. […]
【CSS】filterプロパティを使って画像を加工する方法画像をぼかしたりグレースケールにしたり彩度を上げたり、何かしら画像を加工したい場合、PhotoShopなどの画像加工ソフ […]
【アニメーション】スクロールに合わせて画像を表示するCSSサンプルコード10選今風のWebサイトはただ情報を表示するだけでなく、ユーザーを楽しませる演出・アニメーションを取り入れているものが多くあり […]
【アニメーション】テキストにホバーした時のCSSサンプルコード10選Webサイトのテキストリンク部分はマウスホバーした時、何かしらアニメーションを付けることが多いですね。アニメーションを設 […]
【テクニック】画像の上のテキストを読みやすくする方法Webサイトのデザインをしていると画像の上にテキストを配置する機会がよくあります。しかし、背景となる画像によってはその上 […]