叽叽喳喳引导动态轮播 [英] twitter bootstrap dynamic carousel

问题描述

我想用引导的旋转木马，通过内容来动态滚动（例如，搜索结果）。所以，我不知道怎么的内容很多网页会出现，我不希望获取后续页面，除非用户点击下一步按钮。

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.

我看了看这个问题：旋转木马与动态内容，但我不认为答案适用，因为它似乎表明装载从DB服务器侧的所有内容（在这种情况下的图像），并返回一切作为静态内容。

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.

我最好的猜测是拦截按钮preSS的单击事件，使Ajax调用了搜索结果的翻页，动态更新页面时的Ajax调用返回，然后生成一个幻灯片事件的传送带。但是，这一切都不是真的讨论或书面的引导页面上。任何想法表示欢迎。

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加载内容到引导旋转木马的解决方案。

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..

解决方案竟然是有点棘手，因为没有方法可以轻松地确定传送带的当前幻灯片。随着一些数据的属性，我能够处理 .slid 事件（如你所说），然后使用jQuery从另一个URL加载内容 $。负载（ ） ..

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 .slid event (as you suggested) and then load content from another url using 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);
});

<大骨节病> 演示上Bootply

这篇关于叽叽喳喳引导动态轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！