Bootstrap 4 - 创建动态轮播

Posted 2023-05-08

【中文标题】Bootstrap 4 - 创建动态轮播

【英文标题】：Bootstrap 4 - creating dynamic carousel

【发布时间】：2020-03-01 01:53:45

【问题描述】：

我正在尝试动态填充 Bootstrap Carousel。我看过一篇之前的 *** 文章，看起来它会起作用，但似乎无法附加到轮播中。轮播需要 6 个项目。

我正在填写下面的 Ajax 调用。脚本通过没有错误，但轮播没有出现。下面指示的图标位置以 image1.jpg、image2.jpg 等形式返回，感谢您的帮助！

我尝试只替换 div 的图像部分，并将轮播中的现有图像操作为新的链接和图像。它似乎没有动态刷新或显示

<script>

    function GetCarouselData() 

        $.ajax(
            type: "Get",
            url: "api/UserApps/username/",
            data: JSON.stringify(data),
            contentType: 'application/json; charset=utf-8'
        ).done(
            function (m) 
                for (var i = 0; i < m.length; i++) 
                    var carstr = '<div class="col-md-2 col-sm-6 col-12"><a href="#"><img src="~/images/"' + m[i].iconLocation + '"  /></a></div > ';
                    $(carstr).appendTo(".carousel1Row");

              
            $('.carouselitem1').first().addClass('active');
            $('#carousel1').carousel();
                return true;

            )
            .fail(function (data) 
                alert("fail");
            );
    

</script>

旋转木马如下所示：

<div id="carousel1" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div  class="carousel-item active">
            <div id="carousel1Row" class="row">

            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carousel1" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel1" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

【参考方案1】：

我的问题。 .appendTo(".carousel1Row") 应该是 .appendTo("#carousel1Row")