スライダーswiperの使い方、swiperオプション

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

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

<link
  rel="stylesheet"
  href="./css/swiper-bundle.min.css"
/>

<script src="./js/swiper-bundle.min.js"></script>

<div class="swiper">
  <!-- スライダー全体を包む要素 -->
  <div class="swiper-wrapper">
    <!-- 各スライドを表す要素 -->
    <div class="swiper-slide">Slide 1</div> <!-- 1枚目のスライド -->
    <div class="swiper-slide">Slide 2</div> <!-- 2枚目のスライド -->
    <div class="swiper-slide">Slide 3</div> <!-- 3枚目のスライド -->
  </div>

  <!-- ページネーション（スライドの位置を示すインジケーター） -->
  <div class="swiper-pagination"></div>

  <!-- 次のスライドに進むためのボタン -->
  <div class="swiper-button-next"></div>

  <!-- 前のスライドに戻るためのボタン -->
  <div class="swiper-button-prev"></div>
</div>

var swiper = new Swiper('.swiper', {
  // スライダーが無限ループするように設定
  loop: true,

  // ページネーション（スライドの位置を示すインジケーター）を設定
  pagination: {
    el: '.swiper-pagination', // ページネーションを表示する要素を指定
    clickable: true,          // ページネーションをクリックしてスライドを切り替えることができるようにする
  },

  // ナビゲーションボタンを設定
  navigation: {
    nextEl: '.swiper-button-next', // 「次へ」ボタンを指定
    prevEl: '.swiper-button-prev', // 「前へ」ボタンを指定
  },
});

var swiper = new Swiper('.swiper-container', {
  // レスポンシブデザインの設定（画面サイズに応じたスライド表示を制御）
  breakpoints: {
    // 画面幅が640ピクセル以上の場合の設定
    640: {
      slidesPerView: 1,    // 1つのスライドを表示
      spaceBetween: 10,    // スライド間の余白を10ピクセルに設定
    },
    // 画面幅が768ピクセル以上の場合の設定
    768: {
      slidesPerView: 2,    // 2つのスライドを表示
      spaceBetween: 20,    // スライド間の余白を20ピクセルに設定
    },
    // 画面幅が1024ピクセル以上の場合の設定
    1024: {
      slidesPerView: 3,    // 3つのスライドを表示
      spaceBetween: 30,    // スライド間の余白を30ピクセルに設定
    },
  }
});

<!-- 次のスライドに進むためのボタン -->
<div class="swiper-button-next"></div>

<!-- 前のスライドに戻るためのボタン -->
<div class="swiper-button-prev"></div>

<script>
  var swiper = new Swiper('.swiper-container', {
    // ナビゲーションボタンの設定
    navigation: {
      // 「次へ」ボタンの要素を指定
      nextEl: '.swiper-button-next',
      // 「前へ」ボタンの要素を指定
      prevEl: '.swiper-button-prev',
    },
  });
</script>

// サムネイル用のスライダーを初期化
var galleryThumbs = new Swiper('.gallery-thumbs', {
  slidesPerView: 4,           // 一度に表示するスライド数を4に設定
  freeMode: true,             // スライドを自由にスワイプできるモードを有効化
  watchSlidesVisibility: true, // スライドの表示状態を監視する
  watchSlidesProgress: true,   // スライドの進行状況を監視する
});

// メインギャラリースライダーを初期化
var galleryTop = new Swiper('.gallery-top', {
  spaceBetween: 10,           // スライド間のスペースを10ピクセルに設定
  thumbs: {                   // サムネイルとの関連設定
    swiper: galleryThumbs,    // サムネイルスライダーを指定
  },
});

var swiper = new Swiper('.swiper-container', {
  // スライダーが無限ループするように設定
  loop: true,

  // 自動再生設定
  autoplay: {
    delay: 2500,                // スライドが切り替わるまでの遅延時間を2500ミリ秒（2.5秒）に設定
    disableOnInteraction: false, // ユーザーの操作後も自動再生を続ける
  },
});