twitter-bootstrap twitter bootstrap 动态轮播
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14961719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
twitter bootstrap dynamic carousel
提问by Kevin
I'd like to use bootstrap's carousel to dynamically scroll through content (for example, search results). So, I don't know how many pages of content there will be, and I don't want to fetch a subsequent page unless the user clicks on the next button.
我想使用引导程序的轮播来动态滚动内容（例如，搜索结果）。因此，我不知道会有多少页内容，并且除非用户单击下一个按钮，否则我不想获取后续页面。
I looked at this question: Carousel with dynamic content, but I don't think the answer applies because it appears to suggest loading all content (images in that case) from a DB server side and returns everything as static content.
我看了这个问题：Carousel with dynamic content，但我认为答案不适用，因为它似乎建议从数据库服务器端加载所有内容（在这种情况下为图像）并将所有内容作为静态内容返回。
My best guess is to intercept the click event on the button press, make the ajax call for the next page of search results, dynamically update the page when the ajax call returns, then generate a slide event for the carousel. But none of this is really discussed or documented on the bootstrap pages. Any ideas welcome.
我最好的猜测是拦截按钮按下时的点击事件，对搜索结果的下一页进行ajax调用，当ajax调用返回时动态更新页面，然后为轮播生成滑动事件。但是这些都没有在引导页面上真正讨论或记录。欢迎任何想法。
回答by Zim
If you (or anyone else) is still looking for a solution on this, I will share the solution I discovered for loading content via AJAX into the Bootstrap Carousel..
如果您（或其他任何人）仍在为此寻找解决方案，我将分享我发现的通过 AJAX 将内容加载到 Bootstrap Carousel 中的解决方案。
The solution turned out to be a little tricky since there is no way to easily determine the current slide of the carousel. With some data attributes I was able to handle the .slidevent (as you suggested) and then load content from another url using jQuery $.load()..
结果证明该解决方案有点棘手，因为无法轻松确定轮播的当前幻灯片。使用一些数据属性，我能够处理.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);
});
