bxSliderの画像を動的に変更する

画像を動的に変更する方法ですが、公式サイトに記載されていないせいか、StackOverflowなんかに結構質問が上がっていますね。大した内容ではないのですが、メモがてら書き残しておきたいと思います

bxSliderの使い方は下記を参照下さい

サンプルコード

内容は大体以下の通りです

  1. empty()でsliderの中身を空にする
  2. append()で<li><img>タグを追加
  3. slider.reloadSlider()でsliderを再構成する

サンプルコードでは全ての画像を入れ替える為、一度空にしていますが、画像を追加するだけであればempty()は不要です。同様に削除する場合もempty()せずにremove()辺りで<li>タグを削除した後にslider.reloadSlider()を呼び出せばOKです

デモ

    ボタンを押すと画像が切り替わります

    プライバシーポリシー