Question

我有这样的旋转木马：

 <div class="col-sm-4">
        <div class="card">
            <div class="card-block">
                <div class="col-sm-12">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

                        <div class="carousel-inner" role="listbox" id="carrusel">
                            <div class="carousel-item item active">
                                <img class="d-block img-fluid" src="mysource.jpg" alt="First slide">
                            </div>
                            <div class="carousel-item item">
                                <img class="d-block img-fluid" src="mysource.jpg" alt="Second slide">
                            </div>
                            <div class="carousel-item item">
                                <img class="d-block img-fluid" src="mysource.jpg" alt="Third slide">
                            </div>
                        </div>
                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#carouselExampleIndicators" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#carouselExampleIndicators" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

这很好用。一切正常。

我想用Javascript加载图片，所以我这样做了：

 $.ajax({
        type: "POST",
        async: true,
        url: '/getmoreimages/' + someid,
        dataType: 'json',
        success: function (data) {

            $.each(data.imageurl, function (key,data) {
                $('#carrusel').append($('<div class="carousel-item item active"><img class="d-block img-fluid" src='  + data + '></div>'));
            });

            console.log(data);

        },
        error: function (data) {
            console.log('Error:', data);
        }
    });

我期待旋转木马会根据您点击的位置添加更多图片。

相反，它添加了一个静态轮播，它对每个图像都没有任何作用，打破了页面。

有什么建议吗？

Answer 1

如果数据是包含以下对象的数组：

<div class="div-wrapper">

  <div class="my-text-input">Input</div>

    <div class="map">

      <!-- Content -->

    </div>

  </div>

</div>

然后尝试按如下方式修改循环：

serif-monospace

请注意，js carrousel加载程序可能需要在html中已经存在的图像才能正确呈现。

Answer 2

如果我们假设你的＆＃34; data.imageurl＆＃34;在$ .each中是一个数组，并提供正确的网址，然后尝试下面的AJAX＆＃39;成功功能

success: function (data){

    $.each(data.imageurl, function (key,data) {
        $('#carrusel').append($('<div class="carousel-item item"><img class="d-block img-fluid" src='  + data + '></div>'));
    });

    $('.carousel').carousel();

}

使用AJAX将图像添加到Bootstrap Carousel

2 个答案: