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

はじめに
Swiper.jsとは？
slickからSwiperへの移行はどうか？
まとめ
参考サイト

はじめに

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

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

↓使って制作したサイトはこちらから

島根県出雲市でシステム開発・導入の相談なら三島笑会

島根県出雲市でシステム開発や導入のご相談なら「三島笑会」へ。出雲市を拠点に、システム開発・保守、WEB制作支援、WEB決済システム導入サポートなどのサービスをご提供しています。まずはご相談ください。

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

Swiper.jsとは？

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

主な特徴

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

実装方法（基本構造）

以下のようにHTMLとJavaScriptを記述することで、Swiperを簡単に導入できます。

1. CSSとJSの読み込み

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

2. HTMLマークアップ

<div class="swiper mySwiper">
  <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>

3. JavaScriptで初期化

const swiper = new Swiper(".mySwiper", {
  loop: true,
  autoplay: {
    delay: 3000,
  },
  centeredSlides: true,
  slidesPerView: 1.2,
  spaceBetween: 20,
  pagination: {
    el: ".swiper-pagination",
    clickable: true,
  },
  breakpoints: {
    768: {
      slidesPerView: 2.5,
      spaceBetween: 30,
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 40,
    }
  }
});

4. スタイルの調整

.swiper-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.swiper-slide {
  text-align: center;
}

実装例（Web制作実績）

以下は、Swiperを使って構築した「Web制作実績」のカルーセル例です。（リンクになっています）

slickからSwiperへの移行はどうか？

slickとSwiperのどちらを使うか悩んでいる方は、以下のように整理するとどうでしょうか。

比較項目	slick	Swiper
対応技術	jQuery	JavaScript
更新頻度	低い	頻繁
表現力	標準的	高い（3D、グリッド等）
学習コスト	低い	中くらい

まとめ

今回は、モダンなスライダーライブラリ「Swiper.js」を使ったカルーセルの実装方法をご紹介しました。

表現力が高く、モバイル対応にも優れているため、今後のWeb制作において非常に有力な選択肢です。

ぜひ実際のサイトで試してみてください。

参考サイト

使い方やオプションについては、以下のサイトを参考にさせていただきました。

【Swiper】カスタマイズ用オプションまとめ一覧

Swiperのオプション一覧をまとめて解説。スライダーのカスタマイズには必須で、全部覚える必要はありませんが知っておいて損はありません。保存必須。

JavaScriptの知識が無くてもかんたんにスライダーを実装する方法を知りたい！