jQuery append和Bootstrap轮播

Question

So I want to add custom amount of carousel items using JQuery.

Here is the code in script.js (this is also the only thing in the file).

<script>
$(document).ready(function(){
    for(i = 0; i < 5; i++) {
        $('.carousel-inner').append('<div class="item"> <img src="1.jpg" alt=""> </div>');
    }
});</script>

That is how I call script in

<script type="text/javascript" src="script.js"></script>

Here is the carousel that already contains two items:

<div class="carousel-inner" role="listbox">
        <div class="item active">
        <img src="1.jpg" alt="">
        <div class="carousel-caption">
        <h3>Item 1</h3>
        <p>This is the first item</p>
        </div>
        </div>

        <div class="item">
            <img src="5.jpg" alt="">
            <div class="carousel-caption">
                <h3>Item 2</h3>
                <p>This is the second item</p>
            </div>
        </div>
</div>

However, I do not see any other items in the carousel and this does not work.

Answer 1

Okay, a silly mistake was made by me, if anyone struggles here's the answer:

$('.carousel-indicators').append('<li data-target="#myCarousel" data-slide-to="'+ i + '"></li>');

Just add this in the script.js. The problem was that I actually created the items, but did not display them, as I need to also add indicators for the items.