Swiper.jsで特定のスライドの表示時間を変更する方法

2023年2月8日2023年7月1日

まずはデモとコードをご覧ください。

See the Pen Untitled by muchi@webコーダー (@muchikun_61) on CodePen.

1枚目の画像は3秒、2枚目は6秒、3枚目は9秒と各スライドで表示時間が違うのが確認できたかと思います。では早速、解説していきます！

基本的なswiper.jsの使い方を知っている前提で解説しております。その点はご了承ください。

スライダーを用意する

まずはスライダーを用意します。ココでは画像をスライド表示させる簡単なものを用意しました。

HTML

<!-- swiperのcssを読み込む -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://drive.google.com/uc?export=view&id=19jPP1tf9d5RTGEi0ehk9TYD9N0o59t9B" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://drive.google.com/uc?export=view&id=1d6DBaXFrE-0gassInKJwsbTjJ37o180-" alt="">
    </div>
    <div class="swiper-slide">
      <img src="https://drive.google.com/uc?export=view&id=1m6dapD-uRxhOyd462s3gGBWXA6hEMyz8" alt="">
   </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<!-- swiperのjsを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

CSS

.swiper {
  width: 400px;
  height: 200px;
}

JavaScript

const swiper = new Swiper('.swiper', {
  direction: 'horizontal',
  loop: true,
  autoplay: {
     delay: 3000, //　デフォルトの表示時間を指定
  },
  pagination: {
    el: '.swiper-pagination',
  },
});

JavaScriptのautoplayの記述がないと自動スライドしないので忘れずに記述しましょう。併せてdelayでデフォルトのスライド表示時間を設定できるのでお好みの時間に設定してください。次に紹介する特定のスライドのHTMLタグに対しての表示時間設定を行わなかった場合、ココで指定した時間が適用されます。

swiper-slideのHTMLタグにdata-swiper-autoplayを追加する

HTML

<!-- swiperのcssを読み込む -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="https://drive.google.com/uc?export=view&id=19jPP1tf9d5RTGEi0ehk9TYD9N0o59t9B" alt="">
    </div>
<!--     表示時間を6秒に変更 -->
    <div class="swiper-slide" data-swiper-autoplay="6000">
      <img src="https://drive.google.com/uc?export=view&id=1d6DBaXFrE-0gassInKJwsbTjJ37o180-" alt="">
    </div>
<!--     表示時間を9秒に変更 -->
    <div class="swiper-slide" data-swiper-autoplay="9000">
      <img src="https://drive.google.com/uc?export=view&id=1m6dapD-uRxhOyd462s3gGBWXA6hEMyz8" alt="">
   </div>
  </div>
  <div class="swiper-pagination"></div>
</div>

<!-- swiperのjsを読み込む -->
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

HTMLタグのswiper-slideに対してdata-swiper-autoplayで表示時間を個別に設定しています。その箇所だけ抜き出すとこんな感じです。

    <div class="swiper-slide" data-swiper-autoplay="6000">
      <img src="https://drive.google.com/uc?export=view&id=1d6DBaXFrE-0gassInKJwsbTjJ37o180-" alt="">
    </div>

このように書くことで、先ほどJavaScriptのdelayで記載したデフォルトの表示時間ではなく、こちらの時間が適用されます。これだけです。めちゃくちゃ簡単です。