I'm trying to add images dynamically to a Bootstrap Carousel but it just shows them in a list (.jpg).

The images are National Parks Service API urls (.jpg).

Here's the HTML

<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators"></ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner"></div>
    <!-- Controls -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

and JS

$(document).ready(function(){
for(let j = 0; j < parkInfo.data[i].images.length; j++) {
  $('<div class="item"><img src="'+parkInfo.data[i].images[j].url+'" width="50%">   </div>').appendTo('.carousel-inner');
  $('<li data-target="#carousel" data-slide-to="'+j+'"></li>').appendTo('.carousel-indicators')

}
  $('.item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  $('#carousel').carousel();
});

I'm trying to add images dynamically to a Bootstrap Carousel but it just shows them in a list (https://i.sstatic/qOCBe.jpg).

The images are National Parks Service API urls (https://www.nps.gov/mon/uploads/structured_data/3C86AAE7-1DD8-B71B-0BA8BC5E5E895E98.jpg).

Here's the HTML

<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators"></ol>
    <!-- Wrapper for slides -->
    <div class="carousel-inner"></div>
    <!-- Controls -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>

and JS

$(document).ready(function(){
for(let j = 0; j < parkInfo.data[i].images.length; j++) {
  $('<div class="item"><img src="'+parkInfo.data[i].images[j].url+'" width="50%">   </div>').appendTo('.carousel-inner');
  $('<li data-target="#carousel" data-slide-to="'+j+'"></li>').appendTo('.carousel-indicators')

}
  $('.item').first().addClass('active');
  $('.carousel-indicators > li').first().addClass('active');
  $('#carousel').carousel();
});

• javascript
• jquery
• html
• twitter-bootstrap
• carousel

Share Improve this question Follow asked May 15, 2018 at 6:38 Lam PhamLam Pham 3911 gold badge11 silver badge44 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Looks like you need to have a class on the item 'carousel-item' not 'item'.

https://jsfiddle/orb9945u/

$(document).ready(function(){
    for(let j = 0; j < 5; j++) {
        $('<div class="carousel-item"><img 
          src="https://loremflickr./320/240" width="50%">   
          </div>').appendTo('.carousel-inner');
        $('<li data-target="#carousel" data-slide-to="'+j+'"> 
          </li>').appendTo('.carousel-indicators')

    }

    $('.carousel-item').first().addClass('active');
    $('.carousel-indicators > li').first().addClass('active');
    $('#carousel').carousel();
});

Work for me

for(let j = 0; j < data.length; j++) {
                   $('<div class="item"><img src="'+data[j].imageName+'"></div>').appendTo('.carousel-inner');
                   $('<li data-target="#carousel" data-slide-to="'+j+'"></li>').appendTo('.carousel-indicators');
              }
              $('.item').first().addClass('active');
              $('.carousel-indicators > li').first().addClass('active');
              $('#carousel').carousel();