12

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

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

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

4

2 回答 2

16

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

这个解决方案有点棘手，因为没有办法轻松确定轮播的当前幻灯片。使用一些数据属性，我能够处理.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);
});

Demo on Bootply

于 2013-06-01T00:48:21.903 回答
0

我将@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();
});
于 2020-08-16T11:25:21.037 回答