web関連

【swiper.js】1枚目のスライドが切り替わる時間を2枚目以降と合わせる方法

swiper.jsでautoplayでdelayとspeedを使用していた場合、最初の1枚目だけが次のスライドへの切り替えにかかる時間が異なる
その理由と対処方法について説明します。

最初の1枚目と2枚目以降で表示時間が違う理由

swiper.jsで自動再生autoplayを使って、delay(スライド1枚の表示時間)を指定したうえでspeed(切り替えにかかる時間)を使用すると
「delay+speed=1枚のスライドにかかる時間」と計算される

これの何が問題かというと1枚目にはspeed(切り替えにかかる時間)が反映されずdelay(スライド1枚の表示時間)のみが反映される

そして2枚目以降にはdelay+speedが反映されるため1枚目と表示時間が異なるという結果になる

詳しくはわからないがspeedが「切り替えにかかる時間」ということもあり、1枚目には適用されないものと考えられる

例えば、以下の例

let swiper = new Swiper ('.swiper', {
  speed: 1500,// 切り替え時の速度
  autoplay: {
    delay: 5000,// スライドが切り替わるまでの時間
  },
})

この例であれば、1枚が切り替わるまでの時間は「6.5秒」になる
しかし、speedの1.5秒は1枚目には適用されないので、1枚目のみ次のスライドに切り替わるまで「5秒」となる

この1枚目も表示時間を「6.5秒」にする方法を以下で紹介する

1枚目と1枚目以降の表示時間を同じにする方法

var test_swiper = new Swiper('.swiper', {
	speed: 1500,// ここは変えない
	autoplay: {
		delay: 6500, // ここは1枚目のスライダーの表示時間を書く
	},
});
test_swiper.on('slideChange', function () {// スライド切り替え時発火
	if (this.realIndex > 0) {// 1枚目以降の時
		this.params.autoplay.delay = 5000;// 2枚目以降の表示時間を指定
	}
});

これで1枚目も「6.5秒」で、2枚目以降も「6.5秒」とスライドの表示時間を指定できる

詳しくはswiperの公式ドキュメントを確認するといい

具体的な使用案:次のスライドまでの時間を知らせるページネーション

そもそもどこで使うの?と気になる人もいるだろう

今回調べる原因になったのは、スライドが次のスライドに切り替わるまでのカウントダウンタイマー付きページネーションを作ろうとしたときだ
cssのアニメーションでカウントダウンタイマーを作成したところ1枚目と2枚目以降でそのcssアニメーションにずれが発生した

具体的なサンプルに関してはとても参考になるサイトを見つけたので、リンクを貼っておくので確認をしてみて欲しい

参考リンク

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。