初心者向けに現職Webエンジニアがデザイン、コーディング、ディレクションについて解説。

mogaBlog

Web コーディング

【bxslider】スライドごとに表示時間(待機時間)を設定する方法

投稿日:2020年1月4日 更新日:

つい先日実装する機会がありましたので備忘録がてらに。
コンテンツスライダーでスライドごとに表示時間(待機時間)を変更したい時ってありますよね。1枚目は3秒、2枚目は4秒、最後のスライドだけ10秒みたいな感じで。
ただ、デフォルトの設定だと全て同じ秒数が適用されています。
そこでbxsliderの機能でコールバックと呼ばれるオプションがありますのでこちらを使って実装していきます。

bxsliderの基本的な実装方法やオプションについては下記をご確認ください。

誰でも簡単スライドショー!「bxslider」の設置方法【jQuery】

今回は例として5枚ほどのスライドで実装したと想定して記述してます。

<ul id="slider">
  <li><img src="slide01.jpg"></li>
  <li><img src="slide02.jpg"></li>
  <li><img src="slide03.jpg"></li>
  <li><img src="slide04.jpg"></li>
  <li><img src="slide05.jpg"></li>
</ul>

次にjQueryの記述でbxsliderを呼び出すだけではなく、下記のような記述で呼び出します。

$(function() {
  var slider = $('#slider').bxSlider(),
      pauseSettings = [1000, 2000, 3000, 4000, 5000];

  differentPauseSlider(0);
  function differentPauseSlider(startSlide) {
    slider.reloadSlider({
      auto: true,
      pager: false,
      controls: false,
      pause: pauseSettings[startSlide],
      startSlide: startSlide,
      onSlideAfter: function($slideElement, oldIndex, newIndex) {
        differentPauseSlider(newIndex);
      }
    });
  }
});

各スライドの表示時間(待機時間)はpauseSettingsのところで指定しています。今回は5枚のスライドですのでカンマ区切りで5つの数字が指定されています。
1枚目→1000(1秒)
2枚目→2000(2秒)
3枚目→3000(3秒)
4枚目→4000(4秒)
5枚目→5000(5秒)

bxslider大好きマンにとってはうれしいカスタマイズですね。

こちらの実装方法は下記で紹介されたものになります。
jquery - How to set up slide duration at bxslider - Stack Overflow

ではまた。

この記事を書いた人

moga

moga

歴14年のフロントエンジニア。HTML/CSSはもちろん、JavaScriptも得意。主に初心者コーダー向けに記事を書いています。

Ads



-Web, コーディング

Copyright© mogaBlog , 2021 All Rights Reserved Powered by STINGER.