目次
はじめに
こんにちは、クロです！
前回までにBootstrapを使ったスライド(カルーセル)をご紹介しましたが、実はスライドを実装できるプラグインは豊富に存在することはご存知でしょうか？
先に紹介したBootstrapやGSAPの他にも、今回ご紹介するSlickやSwiperなどのさまざまなプラグインが存在するのです！
ただ、これだけ多くのプラグインがあると、自然と「どれが一番使いやすいの？」と考えてしまうのではないでしょうか？
実装の難易度、情報収集のしやすさ、ユーザー視点での使い勝手の良さなど、重視するポイントによって両者の評価はかわってくることでしょう。
今回はSlickとSwiperのスライドを実際に実装しつつ、両者の特徴や使い勝手の良さなどについて検証していきたいと思います！
スライドを実装してみる
それではまずは、SlickとSwiperを使ったスライドを実装してみましょう。
SlickとSwiperの公式サイトより、それぞれ実装に必要なコードを入力していきます。
slick公式ページ
swiper公式ページ
上記のサイトのコードを元に作成したものが以下の通りとなります。
(ほぼ同じレイアウトに仕上げてあります)
Slickバージョン
Swiperバージョン
両者のメリットとデメリット比較
上記の通り、両者のスライドが揃いました。
両者ともモナリザの画像が問題なくスライドに表示され、左右の画像への遷移についても問題ないかと思われます。
それではここで、両者にはどのようなメリット・デメリットが存在するのか？
以下の通りまとめてみました。
Slick
メリット
・一番人気で情報が非常に多い
・シンプルなコードで実装できる
・公式には載っていないカスタマイズ情報も多く、自力での実装へのハードルが低い
デメリット
・2017年10月以降更新されていないため、予期せぬバグが起きる可能性がある
・機能の大半がjQueryに依存しているため、処理が遅れることがある
・環境の設定など、場合によって表示が崩れる
Swiper
メリット
・オプションが豊富
・高頻度で更新されている
・jQueryに依存しないため、処理が早い
デメリット
・容量が大きい
・JavaScriptへの記述が必要のため、コードが複雑になる
・公式サイトが現状英語のみのため、英語が苦手な人にはハードルが高い
結局どちらが使いやすいのか？
上記の通り、Slick・Swiperのどちらにもメリット・デメリットは存在します。
日本語対応で情報を収集しやすい、デザインが豊富など、重視するポイントにおいてどちらを選ぶかは人それぞれでしょう。
しかしながら、Slickについては重要なデメリットとして、2017年以来6年ほど更新されていないという点があげられます。
私自身も案件でSlickでのスライダーを実装したところ、画面幅を縮めた際のスライドの勝手な移動、読み込み処理に時間がかかるためのレイアウト崩れなど、多くの不具合に直面した経験があります。
シンプルなコードゆえに着手しやすいものの、上記のように思わぬ不具合に躓いてしまうことも考えられます。
以上を踏まえると、JavaScriptの理解が必要にはなるものの、今後の安定した実装のためには Swiperが使いやすいプラグインであると言えるのではないでしょうか。
おわりに
上記の結論の通り、今回はSwiperに軍配を上げさせてもらいました。
もちろん今後、Slickに大規模な更新がかかることで、上記に挙げたデメリットが克服される日が来る可能性も十分にあり得ます。
そうなれば、SlickとSwiperはスライダー実装においての二大プラグインとなることもあるかもしれません。
一コーダーとして、スライダー実装への理解を今後も深めつつ、SlickとSwiper双方のアウトプットを重ねていきたいと思います！
それでは、また次回！
参考サイト
画像スライダーのライブラリはslickよりSwiperの方がおすすめなたった１つの理由
【実装例あり】スライダーSwiper.jsの基本的な使い方、機能解説
【2023年最新Ver9】Swiperの使い方とよく使うオプション・カスタマイズ方法を解説
WEB制作で簡単に実装できるお勧めスライダープラグイン、Swiper、Slick Slider、VEGAS2のデザイン性と使いやすさを比較
スライダープラグイン Swiper で中央寄せに！そして両端の見切れ具合の調整方法。
画像引用元
