HOME BLOG JavaScript 画像スライダーのライブラリはslickよりSwiperの方がおすすめなたった1つの理由

画像スライダーのライブラリはslickよりSwiperの方がおすすめなたった1つの理由

ホームページによくある画像スライダー。
一般的にはエンジニアが開発をする場合、JavaScriptのライブラリを使うことになりますが、その際に検討することになることがいくつかあるライブラリの中でどれを使うかということです。

今回弊社が受託で開発した案件をきっかけに思ったのが、Swiperがslickより良いということです。

理由はシンプルで、
slickはスマホでスワイプした際、ほぼ真横にスワイプしないと反応してくれない点が微妙だったから
というものです。

簡単に経緯と、サンプルのデモもアップしますので、参考になれば幸いです。

今回の出来事の経緯

今回の受託案件での出来事の流れとしては、

  1. slickを使ってお客さんに納品
  2. お客さんがスマホで確認したところ、画像スライダーが真横にスワイプしないと切り替わらず、これでは利用者が使いにくいから改善して欲しいと指摘
  3. 弊社側でも確認したところ、確かに使いづらいと判断し、Swiperを使うよう修正したらいい感じになり、それで再度納品
  4. お客さんからOKを頂いた

といった形でした。

当初はslickを採用し、お客さんに納品した

実際のものの公開はできないですが、以下がslickで作った画像スライダーのサンプルです。(このサンプルのソースコードは後半に記載しています)

スライド1
スライド2
スライド3

スマートフォンで実際に操作して頂ければわかりますが、ほぼ真横にスワイプしないと画像が切り替わらないですね・・・PCで見ると特に問題はないのですが。

実際はこれを商品画像のスライダーにしていて、お客さんから

スマートフォンでの閲覧者からすれば多少斜めにスワイプした際にもサクサク画像が切り替わらないと、使いづらいサイトという印象を持たれ、離脱に繋がりかねない

というご指摘を頂きました。

弊社としては画像スライダーのライブラリとしてネット上での評判の良かった、このslickを採用し、スマホでの動作確認もおこなってはいたのですが、お客さんからの指摘はもっともだと感じ、slickにはこの点を解消できそうな設定項目などもなさそうだったので、別のライブラリを探すことにしました。

Swiperに置き換えたら、スマホでのスワイプが非常に滑らかに

他のライブラリを探して、デモなどを見て良さそうだなと思ったのがSwiperというライブラリです。

公式サイトによると、マクドナルドやバーガーキングと言った大手のホームページでも使われている、と書かれていました。

公式サイトより

以下がSwiperを使ったサンプルになります。

スライド1
スライド2
スライド3

スマホで見て、スワイプすると斜め45度くらいまでの角度でスワイプした際にもスムーズに画像が切り替わることが確認できます。

このSwiperに置き換えて、お客さんに確認したところ、高評価を頂くことができ、無事検品OKとなりました。

サンプルのソースコード

前述のサンプルのslickとSwiperそれぞれのソースコードをアップします。

slick

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- 以下のCSSは矢印やページャーでslickで用意されているレイアウトを使用するなら必要。自分でレイアウトを作るなら不要。 -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<!-- 以下の前に別途jQueryを読み込む必要あり -->
<script type="text/javascript" src="https://mt-hp.jp/wp-content/themes/mthp/lib/img/dummy.png" data-src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<div class="slick">
    <div class="slick-slide slide1">スライド1</div>
    <div class="slick-slide slide2">スライド2</div>
    <div class="slick-slide slide3">スライド3</div>
</div>
/* スライドの幅と高さ */
.slick {
    width: 350px;
    height: 200px;
    margin: 0 auto;
    /* 矢印をabsoluteにするので */
    position: relative;
}
/* サンプルの文字の色などの調整 */
.slick-slide {
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
}
/* 矢印の大きさなどを指定 */
.slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: white;
    font-size: 80px;
    cursor: pointer;
    padding: 0 7.5px;
}
/* 矢印の位置をそれぞれ指定 */
.slick-prev {
    left: 0;
}
.slick-next {
    right: 0;
}
.slide1 {
    background: red;
}
.slide2 {
    background: green;
}
.slide3 {
    background: blue;
}
$('.slick').slick({
    autoplay: true, // 自動再生するか
    autoplaySpeed: 3000, // 自動再生で切り替えをする時間
    speed: 500, // 自動再生や左右の矢印でスライドするスピード
    arrows: true, // 前後の矢印を指定するか
    // 矢印のHTMLを指定、今回はfont-awesomeを使った
    prevArrow: '<i class="fa fa-angle-left slick-arrow slick-prev"></i>',
    nextArrow: '<i class="fa fa-angle-right slick-arrow slick-next"></i>',
});

Swiper

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://mt-hp.jp/wp-content/themes/mthp/lib/img/dummy.png" data-src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<div class="swiper-container" style="margin-bottom: 30px;">
    <div class="swiper-wrapper">
        <div class="swiper-slide slide1">スライド1</div>
        <div class="swiper-slide slide2">スライド2</div>
        <div class="swiper-slide slide3">スライド3</div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>
/* スライドの幅と高さ */
.swiper-container {
    width: 350px;
    height: 200px;
}
/* サンプルの文字の色などの調整 */
.swiper-slide {
    color: white;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
}
/* 矢印の色、初期状態では青色になる */
.swiper-button-prev, .swiper-button-next {
    color: white;
}
.slide1 {
    background: red;
}
.slide2 {
    background: green;
}
.slide3 {
    background: blue;
}
new Swiper('.swiper-container', {
    loop: true, // 最後のスライドの後は最初のスライドに戻るならtrue
    navigation: { // 前後の矢印のクラス名を指定
        prevEl: '.swiper-button-prev',
        nextEl: '.swiper-button-next',
    },
    autoplay: {
        delay: 3000, // 自動再生する場合の実行間隔
        disableOnInteraction: false, // 矢印やスワイプでスライド切り替わった場合、自動再生を停止するか、再開したいのでfalse
    },
    speed: 500, // スライドの切り替わる時間
});

ソースコードを比較して

今回そこまで凝ったことをしなかったので、オプションは

  • 自動再生
  • 前後の画像にスライドする矢印

くらいしか使いませんでした。

扱う上での難易度はどちらもネット上の情報も十分あったのもあり、差はない思います。

Swiperの方が前後の矢印がデフォルトで使いやすいものを出してくれると思いました。(前述のサンプルはデフォルトのものに色をCSSで変えただけです)
しかし、その辺りはCSSで調整すれば良いので、ほとんど気にならないレベルです。

一方、スマホでのスワイプは自分でJavaScriptを書いて良い感じに作ろうとすると、難易度が高いため、そこを割愛できるSwiperは価値が高いと思っています。

その他、選定の参考にするための情報の比較

その他、ライブラリ選定の参考になりそうな情報をまとめます。

比較項目Swiperslick
最新バージョン6.6.11.8.0
最終更新日2021/05/122017/09/12
GitHubスター数27,27326,800
依存ライブラリ特になしjQueryが必要
CSSサイズ13.9KB1.73KB
JavaScriptサイズ144KB51.9KB
スマホでスワイプした時の感度
React.js対応React Slickを利用
Vue.js対応vue-slickを利用
GitHubhttps://github.com/nolimits4web/swiperhttps://github.com/kenwheeler/slick
公式サイトhttps://swiperjs.com/https://kenwheeler.github.io/slick/
※2021年5月時点の情報です

基本的な、

  • 自動再生
  • ループ再生
  • 矢印ボタン
  • ページャー

の機能はどちらも備えています。

Swiperの方が更新がされているのと、jQueryが不要なのはメリットです。(といいますか、slickが2017年から更新されていないのはちょっとまずい点ですね・・・)

画像スライダーのスマホ対応での重要性

今はだいたいのWebサイトはアクセス全体のうち、スマートフォンの割合が8割9割を占める、というサイトも多いです。

当サイトのようなホームページ制作会社向けのサイトや、システムエンジニア向けのサービスではスマホよりパソコンからのアクセスの方が多いようなケースもありますが、それでもスマホ対応の重要性は年々高くなっていると言われています。

そのため、ホームページのファーストビューに表示されることも多い(=サイト内でも閲覧数が多い)画像スライダーのスマホ対応は非常に重要と言えます。

まとめ

以上のことから、Swiperの方がslickよりも現状優れているというのが弊社の見解です。

ネットで調べるとslickの方が評価が高い記事の方が多いような気がしますが、多くのサイトはスマホファーストと言われるくらいPCよりスマホでのアクセス割合が多いことから、Swiperのスマホでの挙動が良いということはかなり評価されるポイントではないかと思いました。

なお、slickもSwiperも、今採用の多くなっているJavaScriptのライブラリである、React.jsやVue.jsでの利用も可能です。
また、ネットでの情報量も豊富ですので、最後は対応ブラウザや動作の重さなども踏まえた総合的な判断になるかと思います。

最後になりますが、当サイトで販売しているWordPressテンプレートの最新バージョンでは、画像スライダーにSwiperを使用していますので、ぜひ見ていってください。

ESTABLISHデモページ
LUXURYデモページトップページ
LUXURYデモページキャストページ

画像スライダーのライブラリ選びの参考になれば幸いです。