Swiperについて
Swiperは、モバイル端末に最適化されたモダンなタッチスライダーライブラリです。
WebサイトやWebアプリケーションにおいて、スワイプ操作によるコンテンツ切り替えを簡単に実装できます。
目次
主な特徴
- タッチ操作対応：スマートフォンやタブレットでのスワイプ操作に最適化されています。
- レスポンシブデザイン：あらゆるデバイスサイズに対応し、柔軟にレイアウトを調整できます。
- 豊富なカスタマイズオプション：ページネーション、ナビゲーションボタン、自動再生など、多様な機能を提供します。
- 軽量：パフォーマンスに優れ、高速に動作します。
- フレームワーク対応：React、Vue、Angularなどの主要なJavaScriptフレームワークと統合できます。
主な用途
- 画像ギャラリーやカルーセル
- 製品紹介スライダー
- コンテンツのスライドショー
- モバイルアプリ風のUI実装
基本的な使用方法
HTMLにSwiper用のマークアップを追加し、CSSとJavaScriptを読み込んで初期化するだけで、簡単にスライダーを実装できます。
公式サイトには豊富なデモや詳細なドキュメントが用意されています。
Swiperを読み込む
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>Swiperを設置する
<div class="swiper calendar-swiper">
<div class="swiper-wrapper">
<% @calendar_months.each_with_index do |month_data, index| %>
<div class="swiper-slide" data-month-index="<%= index %>">
<div class="calendar-navigation-inline d-flex justify-content-between align-items-center">
<button type="button" class="btn btn-outline-secondary prevMonthBtn">
<i class="fas fa-chevron-left"></i>前月
</button>
<h4 id="currentMonthDisplay" class="mb-0" data-month="<%= month_data[:start_date].strftime("%Y年%m月") %>">
<%= month_data[:start_date].strftime("%Y年%m月") %>
</h4>
<button type="button" class="btn btn-outline-secondary nextMonthBtn">
次月<i class="fas fa-chevron-right"></i>
</button>
</div>
<%= render partial: "simple_calendar/next_period_calendar",
locals: {
start_date: month_data[:start_date],
date_range: month_data[:date_range],
calendar: nil
} %>
</div>
<% end %>
</div>
</div>
- .swiper: メインコンテナ。
- .swiper-wrapper: 追加のラッパー。
- .swiper-slide: スライド(表示単位)。これを切り替えて表示する。
- .swiper-pagination: ページネーションが必要な場合に設置する。
- .swiper-button-prev, .swiper-button-next:ページ送りボタン。必要な場合に設置する。
- .swiper-scrollbar: スクロールバー。 必要な場合に設置する。
初期化と設定
calendarSwiper = new Swiper('.calendar-swiper', {
speed: 0,
spaceBetween: 20,
autoHeight: true,
breakpoints: {
375: {
slidesPerView: 1,
centeredSlides: false,
},
768: {
enabled: false,
slidesPerView: 2,
centeredSlides: false,
}
}
});
設定項目(ここで設定しているもの)
- slidesPerView: 一度に表示するスライドの数
- speed: スライド切り替え時にかかる時間を設定する。
- spaceBetween: 表示されるスライドの間隔を設定する。
- autoHeight: ラッパーの高さを自動的に設定する。
- breakpoints: 画面の横幅によって設定を切り替える。
- centeredSlides: trueにすると、アクティブなスライドが(左側でなく)真ん中に表示される。
- enabled: falseにすると、Swiperの機能(スライド遷移、イベントなど)が無効になる。
上記以外の設定項目については、公式ドキュメントをご確認ください。
参考：
Swiper公式ドキュメント, Parameters（2025年10月閲覧）
https://swiperjs.com/swiper-api#parameters
カスタム機能の設定
メソッドを利用することで、独自の操作や動作制御を実装できます。
btn.addEventListener('click', function(e) {
e.preventDefault();
if (calendarSwiper) {
calendarSwiper.slidePrev();
}
});
この例では、独自のボタンでスライドを遷移できるよう設定しています。
.slidePrev()メソッド
前のスライドへ戻る処理を実行しています。
メソッドについては以下公式ドキュメントをご確認ください。
参考：
Swiper公式ドキュメント, Methods & Properties（2025年10月閲覧）
https://swiperjs.com/swiper-api#methods–properties
モジュール
デフォルトのページ送りボタン、ページネーションなど。
本記事では利用していないため、例示は割愛しています。
詳細は以下公式ドキュメントをご確認ください。
参考：
Swiper公式ドキュメント, Modules（2025年10月閲覧）
https://swiperjs.com/swiper-api#modules
実際の表示
参考リンク
Swiper公式サイト
https://swiperjs.com/
