twitter bootstrap动态轮播

Question

我想使用bootstrap的轮播来动态滚动内容(例如,搜索结果).所以,我不知道会有多少页内容,除非用户点击下一个按钮,否则我不想获取后续页面.

我看了这个问题:带有动态内容的轮播,但我不认为答案适用,因为它似乎建议从数据库服务器端加载所有内容(在这种情况下的图像)并将所有内容作为静态内容返回.

我最好的猜测是拦截按下按钮上的click事件,对搜索结果的下一页进行ajax调用,在ajax调用返回时动态更新页面,然后为旋转木马生成幻灯片事件.但是这些都没有在引导页面上真正讨论或记录.欢迎任何想法.

Answer 1

如果您(或其他任何人)仍在寻找解决方案,我将分享我通过AJAX将内容加载到Bootstrap Carousel中的解决方案.

解决方案结果有点棘手,因为无法轻松确定旋转木马的当前幻灯片.通过一些数据属性,我能够处理.slid事件(如您所建议的),然后使用jQuery从另一个URL加载内容$.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