ajax - twitter bootstrap 动态轮播

Question

我想使用 Bootstrap 的轮播来动态滚动内容(例如，搜索结果)。所以，我不知道会有多少页内容，并且我不想获取后续页面，除非用户单击下一步按钮。

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

我最好的猜测是在按钮按下时拦截点击事件，为搜索结果的下一页进行ajax调用，当ajax调用返回时动态更新页面，然后为轮播生成滑动事件。但是这些都没有在 Bootstrap 页面上真正讨论或记录。欢迎任何想法。

Answer 1

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

由于无法轻松确定轮播的当前幻灯片，因此该解决方案有点棘手。通过一些数据属性，我能够处理 .slid事件(如您所建议)，然后使用 jQuery $.load() 从另一个 url 加载内容..

$('#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