【自習】JS スライダーの挿入

職業訓練校

スライダー(カルーセル)とは？

自習日：2025年7月30日

  • 複数の画像や商品情報を1つの枠内で切り替えて見せる
    • たとえば：人気商品の写真、新着アイテム、おすすめカテゴリやセール情報など。
  • 自動的にスライドしていく（スライドショー型）
    • 数秒ごとに自動で画像が次々と切り替わるようになっています。
  • ユーザー操作で切り替えも可能
    • 画面の左右に「矢印ボタン（ナビゲーション）」があり、クリック（またはタッチ）すれば前後の画像に瞬時に切り替えられます。
    • 下部には「ドット（インジケーター）」が並び、今どの画像を表示しているか一目でわかるようになっています。ドットを直接クリックで任意の画像にジャンプすることもできます。
  • スペース節約・アピール力アップ
    • 1画面に多くの情報を詰め込まず、ユーザーの注目を順にひきやすい。

スライダーの基本構造

  • ナビゲーションボタン（Navigation Buttons）
    前へ・次への矢印ボタンで、スライドの切り替えを操作するパーツ。
    HTMLクラスは主に.swiper-button-prev と .swiper-button-next。
  • ページネーション（Pagination）/ インジケーター（Indicators）
    現在のスライド位置を示すドットや数字などの表示部分。
    Swiperでは .swiper-pagination と呼び、この中の各ドットは .swiper-pagination-bullet クラスが付く。
  • スライド（Slides）
    画像やコンテンツの1枚1枚を指し、.swiper-slide クラスが付いています。
  • スライダーコンテナ（Slider Container）
    全体のスライダーを囲む要素で、swiperやswiper-wrapperなどが使われます。
スライダーのHTML構造
スライドショーを実装できるSwiperとSlick、Splideの違い
この記事では「スライドショーを実装できるSwiperとSlick、Splideの違い」について解説します。スライドショー...
tips-log.com

スライダーの作成方法

  1. JavaScriptライブラリを使う方法
    • 推奨ライブラリ：Splide・Swiper・Slick
  2. HTML＋CSS＋JSだけで実装する方法
    • 必要最小限のコードで済むので、高速・軽量。

Web制作で一般的に推奨されるのはどっち？

実務や運用サイト、本格的なWeb制作では「1.JavaScriptライブラリ利用」が圧倒的に推奨される。

  • 見た目・機能・安全性・メンテ性・開発コストいずれも優れている。
  • 特にタッチやレスポンシブ、複数スライダー設置などニーズがある場合は自作よりもライブラリが安心。
  • HTML/CSS/JS学習や小さなサンプルで「とにかく小さいものを」といった目的なら自作も選択肢だが、後で複雑な機能が必要になったとき苦労する。

Swiperを活用したスライダーの導入

  • Swiperとは：多機能でモダンな、モバイル対応のJavaScript「スライダーライブラリ」。
  • ネイティブに近い滑らかなタッチ操作を実現。
  • インストールや使い方：公式サイト「Getting Started」参照。
  • 仕組み：CDNからCSSとJSを読み込み、HTMLに以下のような基本構造を作り、JSで初期化するだけでスライダーが簡単に動く。

Swiperの主な特徴

  • 軽量で高性能：タッチ操作に最適化されており、モバイルでも快適。
  • 多数の効果に対応：ループ、オートプレイ、ナビゲーションボタン、ページネーション（ドットナビ）、スクロールバー、スライド効果(フェード、3D効果など）。
  • レスポンシブ対応、キーボード操作、マウスホイール操作なども可能。
  • 豊富なAPIで細かな制御やイベントハンドリングができる。

Swiperの具体的な実装方法

1. Swiperのライブラリを読み込む（CDN推奨）

  • まず、HTMLの<head>内に以下のCSSとJavaScriptファイルの読み込みタグを追加。
<!-- 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にスライダー構造を作成

  • スライダーを設置したい場所に以下のような基本構造をHTMLに記述。
  • 必須クラス：swiper、swiper-wrapper、swiper-slide 。
  • mySwiper：任意のクラス名。JavaScriptで参照時に使用。
  • 画像：swiper-slideの中に<img>で入れて、サイズはCSSで調整
class
  • swiper-button-next：ナビゲーション矢印右
  • swiper-button-prev：ナビゲーション矢印左
  • swiper-pagination ：インジケーター(ドットナビ)
<!-- Swiper -->
<div class="swiper mySwiper" style="width: 380px; height: 475px;">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="img1.jpg" alt="画像1" style="width:100%; height:100%; object-fit: cover;">
    </div>
    <div class="swiper-slide">
      <img src="img2.jpg" alt="画像2" style="width:100%; height:100%; object-fit: cover;">
    </div>
    <div class="swiper-slide">
      <img src="img3.jpg" alt="画像3" style="width:100%; height:100%; object-fit: cover;">
    </div>
  </div>

  <!-- ナビゲーションボタン -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- ページネーション（ドットナビ） -->
  <div class="swiper-pagination"></div>
</div>

3. JavaScriptでSwiperを初期化

  • HTML</body>タグの直前に以下のスクリプトを置く。
<script>
  const swiper = new Swiper('.mySwiper', {
    loop: true, // 無限ループ
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true, // ページネーションをクリック可能に
    },
    autoplay: {
      delay: 3000, // 3秒ごとに自動で切り替え
      disableOnInteraction: false, // 操作後も自動再生継続
    },
    speed: 800 // スライド切り替えのアニメーション速度(ms)
  });
</script>

4. CSS調整（任意）

  • object-fit: cover;画像を枠に合わせるためにつけると見映えが良くなる。
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

その他.スライダーでよくあるアレンジ

  • 画像サイズを変更したい場合は、.swiperコンテナのwidthやheightを変える。
  • スライド効果（フェード、スライドなど）をeffectオプションで指定。
  • タッチスワイプの有効・無効設定。
  • 複雑なレスポンシブ対応やカスタムナビゲーション。

実際に作成したスライダー

作成日：2025年7月30日

メモ

  • Swiperはデフォルトでナビゲーション矢印を ::after 疑似要素でフォントアイコン(テキスト)として表示する。
  • そのため、class要素 に対して color: #fff; を指定しても効かず、 疑似要素に色指定しても反映されない場合がある。
  • 対策：class＋::afterでスタイル指定する。
.swiper-button-prev::after {
  color: #fff;
}