Bootstrap 4 - создание динамичной карусели - PullRequest
Новая
       51

Bootstrap 4 - создание динамичной карусели

0 голосов
/ 04 ноября 2019

Я пытаюсь заполнить Карусель Bootstrap динамически. Я видел предыдущую статью о стековом потоке, которая, казалось бы, работала, но не могла добавить к карусели. Карусели нужно 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 + '" alt="" /></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 Ответ

0 голосов
/ 06 ноября 2019

моя проблема. .appendTo (". carousel1Row") должен был быть .appendTo ("# carousel1Row")

...