人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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側の必要な処理が動いていないようで期待した結果にはなりませんでした。

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

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

●質問者: hyoga_h
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●100ポイント ベストアンサー

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


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


Cherenkovさんのコメント
maxSlidesプロパティの振る舞い勘違いしてました。 http://bxslider.com/examples/carousel-dynamic-number-slides

hyoga_hさんのコメント
ご回答ありがとうございます。 画像数が2000枚ほどになってしまうので全てをリストに入れるのは得策では無いかと思います。 リストの書き換えは出来てるので、 単純にbxSliderをリセットして最初から処理し直す事ができればいいんですが。。。

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

hyoga_hさんのコメント
ありがとうございます。 destroySlider()を入れた事で上手く行きました。 ご回答ありがとうございました。m(__)m
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ