Web制作

Swiper 高機能スライダーの実装ガイド

Swiperは画像やテキストをカルーセル表示にできる高機能スライダープラグインです。レスポンシブ対応・タッチ対応・豊富なオプションが揃っており、Webサイトやブログで広く使われています。この記事では導入から実装まで手順を解説します。

導入手順

  1. 公式サイトからファイルをダウンロード
    swiper.min.cssとswiper.min.jsを公式サイトから取得します。
  2. 専用フォルダに配置してHTMLからリンク
    プロジェクト内の適切なフォルダに配置し、HTMLの<head>にCSSを、</body>直前にJSをリンクします。

基本HTML構造

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">スライド1</div>
    <div class="swiper-slide">スライド2</div>
  </div>
  <div class="swiper-pagination"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

JS設定例

ループ・オートプレイ・ページネーション・ナビゲーションをまとめて設定する例です。

var swiper = new Swiper('.swiper-container', {
  loop: true,
  autoplay: { delay: 2500 },
  pagination: { el: '.swiper-pagination' },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
});

Cocoonテーマでの活用

WordPressのCocoonテーマを使用している場合、テンプレートファイルに直接コードを追加することで実装できます。子テーマを使って安全に変更を管理することを推奨します。

カスタマイズ例

ポートフォリオスライダーとして使う場合の工夫点です。

  • タイトル・モックアップ画像・URLリンクをスライドに含める：各スライドにプロジェクト情報を入れることで実績紹介に活用できます。
  • ナビゲーションボタンのサイズ調整：CSSで.swiper-button-nextなどのサイズを変更します。
  • ホバーエフェクト：スライドにホバー時のトランジションを加えると操作感が向上します。
  • 画像幅の制限（70%など）：スライド内の画像がコンテナいっぱいに広がらないようmax-widthを設定します。

まとめ

SwiperはシンプルなHTMLと少量のJavaScriptで高機能なスライダーを実現できます。オプションが豊富なので、用途に合わせて細かくカスタマイズが可能です。まず基本の構造を実装し、必要に応じてオプションを追加していく方法が取り組みやすいでしょう。

← ブログ一覧へ