スライダーのエフェクトの方法は主にスライドとフェードの2種類かと思いますが、Swiperには他にも個性的なエフェクトがあります。
実務ではあまり使わないかも知れませんが、ポートフォリオや自社サイトでは使えるかも知れません。
今回はそんなエフェクトを全てご紹介していきます。
Swiperの基本的な使い方については以下の記事を参照下さい。
【jQuery不要】スライダープラグイン Swiper.jsの使い方
効率よくコーディングしたい人はこちら
Swiperのエフェクトまとめ
まずは基本となるスライダーを見てみます。
See the Pen
Swiper（矢印、ドットインジケーター） by junpei (@junpei-sugiyama)
on CodePen.
前後の矢印、ページネーションが表示されているシンプルなスライダーです。
今回はコードを見やすくする為にページネーションは削除したいと思います。
デフォルトの矢印は幅を狭くした時にちょっと違和感があるかも知れませんが、今回はそのままにしています。
上記はエフェクトはデフォルトの"slide"となります（何も書かないとeffect: 'slide',になります）
またこれから紹介していくエフェクトは、確認しやすいようにスピードをデフォルトの300ミリ秒から600ミリ秒（speed: 600,）に遅くしています。
コードはCodePenのJSタブに書かれているので、そちらを参考にして下さい。
そしてJSタブをクリックすれば大きい画面で確認が出来ます。
fade
JavaScriptに加えるオプションはeffect: 'fade',です（1枚表示のみです）
See the Pen
Swiperエフェクト（fade） by junpei (@junpei-sugiyama)
on CodePen.
cube
JavaScriptに加えるオプションはeffect: 'cube',です（1枚表示のみです）
See the Pen
Swiperエフェクト（cube） by junpei (@junpei-sugiyama)
on CodePen.
coverflow
JavaScriptに加えるオプションはeffect: 'coverflow',です。
これは枚数を変更出来ますが、3枚以外はあまり使わないかと思います（偶数だと中央に表示されません）
1枚表示
See the Pen
Swiperエフェクト（coverflow：1枚） by junpei (@junpei-sugiyama)
on CodePen.
3枚表示
See the Pen
Swiperエフェクト（coverflow） by junpei (@junpei-sugiyama)
on CodePen.
flip
JavaScriptに加えるオプションはeffect: 'flip',です（1枚表示のみです）
See the Pen
Swiperエフェクト（flip） by junpei (@junpei-sugiyama)
on CodePen.
cards
JavaScriptに加えるオプションはeffect: 'cards',です（1枚表示のみです）
See the Pen
Swiperエフェクト（flip） by junpei (@junpei-sugiyama)
on CodePen.
creative
JavaScriptに加えるオプションはeffect: 'creative',です（1枚表示のみです）
creativeはeffect以外にcreativeEffectを設定する事で色々なスライドが作れます。
コードはCodePenでご確認下さい。
See the Pen
Swiperエフェクト（creative） by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト（creative02） by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト（creative03） by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト（creative04） by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト（creative05） by junpei (@junpei-sugiyama)
on CodePen.
See the Pen
Swiperエフェクト（creative06） by junpei (@junpei-sugiyama)
on CodePen.
以上になります。
Brainランキング1位獲得 ＆ 3日で500部突破 クチコミ約280件（平均スコア） 今だけ！5大特典あり🎁コーディング案件の単価と作業効率を上げる！
