JavaScriptライブラリを活用したスライダー（カルーセル）はWeb制作において大変重宝します。
主要ライブラリ
| ライブラリ | 依存関係 | 動作 | 特徴 |
|---|---|---|---|
| Swiper | なし | 重め | 世界中で使用、高機能でエフェクト多彩 |
| Splide | なし | 軽い | 日本語で分かりやすく、軽量でモダン |
| Embla Carousel | なし | 軽い | ロジックのみ提供、軽量だが難易度高 |
| Slick | jQuery | 重め | jQuery依存だが、比較的簡単に実装可 |
世界で最も使われており、レスポンシブ対応や、フェードや3Dなど多彩なエフェクトが用意されているSwiperにて、スライダーの標準機能を紹介します。
Swiperスライダー機能
スライドエフェクト
Swiperには、いくつかのエフェクトが標準で準備されています。
スライド
See the Pen スライダー（スライド1枚） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
フェード
See the Pen Swiper（フェード） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
キューブ
See the Pen Swiper（キューブ） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
カバーフロー
See the Pen Untitled by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
フリップ
See the Pen Swiper（） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
カード
See the Pen Swiper（カード） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
コントロール
ナビゲーション
See the Pen Swiper（ナビゲーション00） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
ナビゲーション（外に配置）
See the Pen Swiper（ナビゲーション01） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
ページネーション
See the Pen Swiper（ページネーション00） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
ページネーション（外に配置）
See the Pen Swiper（ページネーション01） by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
プログレスバー
See the Pen Untitled by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
プログレスバー（下配置）
See the Pen Untitled by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
フラクション
See the Pen Untitled by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
フラクション（外に配置）
See the Pen Untitled by Naoworks design@フリーランスWEBデザイナー (@na_ao_japan) on CodePen.
カスタム事例
上記の機能を使用し更にカスタマイズすることで、いろんなスライダーが実装できます。
（カスタム事例 準備中）
