Twitter Bootstrap 动态轮播

Question

我想使用 Bootstrap 的轮播组件来动态滚动内容（例如搜索结果）。因此，我不知道会有多少页的内容，并且除非用户点击下一页按钮，否则我不想获取后续页面。

我看了这个问题：Carousel with dynamic content，但我认为答案并不适用，因为它似乎建议从 DB 服务器端加载所有内容（在那种情况下是图像），并将所有内容返回为静态内容。

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

- Kevin

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);
});

Bootply上的演示

- Zim

---

除非我漏掉了什么，否则这个解决方案仍然需要最初加载所有幻灯片，即使它们是空的？ - Rahul Patel

Answer 2

我将@Zim的答案与Bootstrap 4结合起来，希望能帮助到某些人。

首先，只加载图像的路径：

<div id="carousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item" data-url="/image/1.png"></div>
        <div class="carousel-item" data-url="/image/2.png"></div>
        <div class="carousel-item" data-url="/image/3.png"></div>
    </div>
</div>

然后在JavaScript中：

$('document').ready(function () {
    const loadCarouselImage = function ($el) {
        let url = $el.data('url');
    
        $el.html(function () {
            let $img = $('<img />', {
                'src': url
            });
            $img.addClass('d-block w-100');
                    
            return $img;
        });
    );

    const init = function () {
        let $firstCarousel = $('#carousel .carousel-item:first');
        loadCarouselImage($firstCarousel);
        $firstCarousel.addClass('active');

        $('#productsCarousel').carousel({
            interval: 5000
        });
     };

     $('#carousel').on('slid.bs.carousel', function () {
         loadCarouselImage($('#carousel .carousel-item.active'));
     });

     init();
});

- user10226559