スライドショーライブラリSlick,Swiper,Splideの比較

Web制作で必ず登場する UI 表現のひとつが スライドショー（カルーセル）。
代表的なライブラリとして以下の 3 つがよく使われています：

• Slick（長年の定番・jQueryベース）
• Swiper（モダン・モバイル最適化）
• Splide（軽量・モダン・高パフォーマンス）

この3つライブライをアクセシビリティの面にも触れながら比較していきます。

各ライブラリの機能表

各ライブラリの特徴

slick.js

slick.jsは歴史が長くオプションが豊富です。
jQueryの使用が必須ですが、HTML、javascriptの設定が初心者でも簡単です。
ただ、アクセシビリティ（ボタン操作やホバーでの一時停止や、aria属性の付与など）に配慮した設計は少し難しい面があります。

実装例

<div class="slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
  $('.slider').slick({
    autoplay: true,
    dots: true,
    arrows: true,
  });
});
</script>

swiper.js

vanilla JSでjquery不要な分動作が軽いですが、slick.jsよりは設定が少し複雑です。
モバイルでの操作性が良く、アクセシビリティの面でも問題なく対応が可能です。

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">1</div>
    <div class="swiper-slide">2</div>
    <div class="swiper-slide">3</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<script>
const swiper = new Swiper('.swiper-container', {
  loop: true,
  autoplay: {
    delay: 3000,
  },
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});
</script>

splide.js

swiper.jsと同じく、vanilla JSでjquery不要な分動作が軽く、ライブラリとしても3つの中で最も軽量です。ただ、オプションの数はswiper.jsよりは少ないですので、パフォーマンス重視のライブラリになります。

<div id="splide" class="splide">
  <div class="splide__track">
    <ul class="splide__list">
      <li class="splide__slide">1</li>
      <li class="splide__slide">2</li>
      <li class="splide__slide">3</li>
    </ul>
  </div>
</div>

<script>
new Splide('#splide', {
  type   : 'loop',
  perPage: 1,
  autoplay: true,
}).mount();
</script>

まとめ

Slick は jQuery がすでにある環境なら最も導入しやすく、初心者にも分かりやすいです。
Swiper は汎用性が高く、タッチ・レスポンシブ・アニメーションすべてをカバーしています。
Splide は最小限のリソースで動くため、First Contentful Paint（FCP）を気にするサイト やモバイル優先サイトにも向いています。