WEBサイト制作で欠かすことの出来ないスライドショー。その中でも人気のある「Swiper」。
簡単にスライドショーを作ることが出来、かつ高性能のライブラリです。
今回の記事では、「Swiper」に用意されているエフェクトの種類とカスタマイズを方法をご紹介したいと思います。

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を使うことで独創的なエフェクトを作り出すことも可能です。
是非、いろいろ試してみて自分だけのスライダーを作ってみて下さい。