まずはデモとコードをご覧ください。
See the Pen Untitled by muchi@webコーダー (@muchikun_61) on CodePen.
1枚目の画像は3秒、2枚目は6秒、3枚目は9秒と各スライドで表示時間が違うのが確認できたかと思います。では早速、解説していきます!
目次
スライダーを用意する
まずはスライダーを用意します。ココでは画像をスライド表示させる簡単なものを用意しました。
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',
},
});
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の使い方が網羅的に紹介されているのでとてもおすすめの記事です。