モダンなカルーセルをSwiper.jsで実装！slickから移行してみました

こんにちは！スタッフのやまさきです。

 

Webサイトにおける「カルーセル」は、限られたスペースで複数のコンテンツを見せたい時にとても便利なUIです。

前回はjQueryベースの「slick」を使った実装方法をご紹介しましたが、今回はよりモダンでパフォーマンスにも優れた「Swiper.js」を使った実装をご紹介します。

 

Swiper.jsとは？

Swiper は、モバイルファーストで設計されたスライダーライブラリで、React・Vue・Angularなどのフレームワークにも対応している人気ツールです。

主な特徴

• 軽量で高速
• モバイル最適化済み（スワイプ操作に強い）
• レスポンシブに強い
• 多彩なオプションと拡張性
• フレームワーク対応が豊富