2013-02-19 20 views
12

私はブートストラップのカルーセルを使ってコンテンツ(例えば、検索結果)を動的にスクロールしたいと思っています。だから、どれくらいのページのコンテンツがあるのか​​分からず、次のボタンをクリックしない限り、次のページを取得したくない。twitter bootstrap動的カルーセル

私はこの質問を見た:Carousel with dynamic contentしかし、それはすべてのコンテンツ(その場合はイメージ)をDBサーバー側から読み込み、すべてを静的コンテンツとして返すことを示唆しているようだから、答えは当てはまりません。

私は、ボタンを押したときのクリックイベントを傍受し、次のページの検索結果を呼び出すようにして、ajax呼び出しが戻るときにページを動的に更新してから、カルーセルのスライドイベントを生成します。しかし、これは実際にはブートストラップのページでは議論されていません。あらゆるアイデアを歓迎します

答えて

16

あなた(または他の誰か)がまだこれで解決策を探しているならば、私はブートストラップカルーセルにAJAXを経由して、私はロードコンテンツの発見ソリューションを共有することになりますが...

ソリューションは少しあることが判明しましたカルーセルの現在のスライドを容易に決定する方法がないので、厄介である。一部のデータは、私は(あなたが示唆したように).slidイベントを処理することができましたし、私は何かが欠けていない限り、jQueryの$.load() ..

$('#myCarousel').carousel({ 
    interval:false // remove interval for manual sliding 
}); 

// when the carousel slides, load the ajax content 
$('#myCarousel').on('slid', function (e) { 

    // get index of currently active item 
    var idx = $('#myCarousel .item.active').index(); 
    var url = $('.item.active').data('url'); 

    // ajax load from data-url 
    $('.item').html("wait..."); 
    $('.item').load(url,function(result){ 
     $('#myCarousel').carousel(idx); 
    }); 

}); 

// load first slide 
$('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){  
    $('#myCarousel').carousel(0); 
}); 

Demo on Bootply

+0

を使用して別のURLからコンテンツをロードし、この属性を持ちますソリューションは空ではあるがすべてのスライドを最初にロードする必要がありますか? –

関連する問題