动态轮播滑块jquery .append

Question

i have to construct a dynamic carousel with jquery ajax and my boss suggest me to use .append() method. This is my carousel html code:

<div id="myCarousel">

            </div>
            <div class="container-fluid" id="slider">
            <div id="pb_2">
            <div id="carousel_2" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" role="listbox">

                <!--img slider del progetto-->
                        <div class="item">
                                <img src="images/img01.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item active">

                                    <img src="images/img24.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">

                                <img src="images/img23.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">

                                <img src="images/img17.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                        <div class="item">

                                <img src="images/img15.jpg" alt="image description" width="95%" height="349" />

                            <div class="carousel-caption">
                            </div>
                        </div>
                <!--fine img slider del progetto-->


                </div>

                <!-- Controls -->
                    <a class="left carousel-control" href="#carousel_2" role="button" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                        <span class="sr-only">Precedente</span>
                    </a>
                    <a class="right carousel-control" href="#carousel_2" role="button" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                        <span class="sr-only">Prossimo</span>
                    </a>
                </div>

             </div>
         </div>

and my jquery ajax:

$(document).ready(function () {
    $.get("myImagesURL")
    .done(function (response) {
      $(response.DataObject).each(function (i, item) {
          $('#myCarousel').append($('<div class="item"><img src="' + item.AbsolutePathImage + '" alt="image description" width="100%" height="349" /><div class="carousel-caption"></div></div>'));
      });
    })
  .fail(function () {
      alert("error");
  })
  .always(function () {
      alert("complete");
  });

});

all images are loaded but the carousel is not... how can i implement this carousel with Jquery? I'm new in programming...

Thanks in advance!

Answer 1

This works for me as is. But you can try this setTimeOut.

        $(document).ready(function () {

     setTimeout(function(){
        $.get("myImagesURL")
        .done(function (response) {
          $(response.DataObject).each(function (i, item) {
              $('#myCarousel').append($('<div class="item"><img src="' + item.AbsolutePathImage + '" alt="image description" width="100%" height="250" /><div class="carousel-caption"></div></div>'));
          });
        });

    }, 3000);


    });