Question

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

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

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

Answer 1

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

解决方案结果有点棘手，因为无法轻易确定旋转木马的当前幻灯片。通过一些数据属性，我能够处理.slid事件（如您所建议的那样），然后使用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);
});

Demo on Bootply

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

twitter bootstrap动态轮播

2 个答案: