jQueryのbxSliderで動的に画像を入れ替えたいと思います。

以下のように画像を指定して画像をスライドさせる事は出来ています。
<ul class="bxslider" id="imglist">
<li><img src="pict/1.jpg"></li>
<li><img src="pict/2.jpg"></li>
<li><img src="pict/3.jpg"></li>
</ul>
やりたい事はスライドが1週したら違う画像一覧を指定してスライドさせるというものです。
(※実際には大量の画像があるため全てを上記リストに入れるのは得策ではありません)

試しにコールバックAPI関数onSlideBeforeにて
週の終わり(次の週の開始)にXMLHttpRequestを使ってinnerHTMLで上記の画像一覧を書き換えました。
しかしそれだけではbxSlider側の必要な処理が動いていないようで期待した結果にはなりませんでした。

代替案でもかまいませんので実現方法をご教示ください。

以上です。宜しくお願いします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/09/18 13:01:35
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント100pt

Options | Responsive jQuery Slider | bxSlider
リファレンスみるとajaxな読み込み機能はなさそうなので、はじめから全てをリストに入れておいて、maxSlidesプロパティで一度に表示する枚数を指定し、一周するタイミングでコールバックで、reloadSlider()します。その際にmoveSlidesプロパティで次のセット分の開始インデックスを指定すれば目的達成するんじゃないですかね。


追記:reloadSlider()じゃなくて、コールバックの$slideElement引数に $slideElement.goToSlide(3)とかすればいいかも。

他2件のコメントを見る
id:Cherenkov

それなら、destroySlider()して、bxSlider()する前の状態に戻してから、再度bxSlider()すればいいと思いますよ。
destroySlider()するとただのリストに戻ってしまうので、一瞬ちらつくかもしれません。
なので、裏に同じものを用意しておいてフェードインですり替えるとか、一旦フェードアウトしてフェードインとか。

2013/09/17 21:57:11
id:hyoga_h

ありがとうございます。
destroySlider()を入れた事で上手く行きました。
ご回答ありがとうございました。m(__)m

2013/09/18 13:01:13

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません