画像スライダーは「Slick」と「Swiper」を押さえていれば大抵どうにかなる説

Web制作の現場では、画像スライダーは今や当たり前のように使われています。

これまでさまざまなコーディング案件に携わってきましたが、既存サイトの修正や改修をしていて感じたのは、「結局、SwiperとSlickさえあれば大抵の案件でなんとかなる」ということ。
以前は「bxSlider」なども主流だったように思えますが、スマホでの操作性がいまひとつだったり、更新が5年以上止まっていることもあり、次第に使われなくなってきた印象です。

さらに軽量化されたライブラリや、Vue.js、Reactなどに対応した新しいスライダーが続々と登場し紹介されていますが、ぶっちゃけ実際の制作現場ではこの2つが圧倒的に多いです。

今回は、SlickとSwiperの特徴や機能比較や使い分けのポイントをご紹介します。

①jQueryベースの定番「Slick.js」

kenwheeler.github.io

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints,...

簡易サンプル

See the Pen
slick-sample_01 by piconotes (@rwvwzrdg-the-flexboxer)
on CodePen.

特徴

• 数多くのサイトで使われている定番ライブラリ
• カスタムの幅も広くオーソドックスなスライダーは手軽に作れる
• jQueryが必要

導入方法

【導入編】画像スライダー「Slick.js」の使い方

圧倒的なシェアを誇り、導入ハードルが低くカスタマイズもしやすい定番のjQueryスライダー「slick」。 初心者の方向けの、slickの導入方法についてご紹介...

②オプションがとにかく豊富な最強のスライダー「Swiper」

swiperjs.com

Swiper - The Most Modern Mobile Touch Slider

Swiper is the most modern free mobile touch slider with hardware accelerated tra...

簡易サンプル

See the Pen
swiper-sample_1 by piconotes (@rwvwzrdg-the-flexboxer)
on CodePen.

特徴

• オプションの数が豊富、公式デモページはこちら
• デザイン・エフェクトは定番から変わり種まで、表現の幅が広がる
• Slickにはないプログレス表示の機能が豊富
• jQuery不要、Javascriptのみで動作するため軽量化を見込める

結局どっちがいいの？

最近は体感としてもSlickから徐々にSwipeに移り変わっているイメージがありますが、現行でSlickを活用しているサイトは圧倒的に多いので、問題なく触れる方が吉という印象です。

それぞれのスライダーの細かい使い方やオプション解説も別記事で紹介しますので、そちらもぜひご活用ください！