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

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

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で記載したデフォルトの表示時間ではなく、こちらの時間が適用されます。これだけです。めちゃくちゃ簡単です。

まとめ

スライダーを作っているとこのスライドは情報量が多い、または伝えたい写真だから長めに表示したいということがあると思います。そんな時なぜひこの方法を使ってみてください。

参考

https://b-risk.jp/blog/2022/04/swiper/#delay

こちらの記事を参考にさせていただきました。swiper.jsの使い方が網羅的に紹介されているのでとてもおすすめの記事です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次