0

I'm trying to generate carousel with images from api json. URL where images are stored is: http://localhost/

First of all I want to check the amount of images occurring in JSON and then display them in carousel. Here's the example of bootstrap carousel code I want to use:

<div class="carousel" id="Carousel" data-ride="carousel">
    <ol class="carousel-indicators">
        <li class="active" data-slide-to="0" data-target="#Carousel">
        <li data-slide-to="1" data-target="#Carousel">
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img class="img-fluid" src="" alt="">
        </div>
        <div class="carousel-item">
            <img class="img-fluid" src="" alt="">
        </div>
    </div>
</div>

Any help will be appreciated!

Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
aphra
  • 5
  • 3

1 Answers1

0

I just added an image element inside the carousel with the help of javascript. Now you have to work only for an active carousal.

serverInfo = {
  "levelshotsArray": [
    "https://picsum.photos/200",
    "https://picsum.photos/200/300?grayscale", "https://picsum.photos/200"
  ]
}

serverInfo.levelshotsArray.map(res => {
  var imge = document.createElement('img');
  imge.src = res;
  imge.height = 100;
  imge.width = 100;
  imge.alt = "dfs";
  document.getElementById('img').appendChild(imge);
});
<div class="carousel" id="Carousel" data-ride="carousel">
  <ol class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#Carousel">
      <li data-slide-to="1" data-target="#Carousel">
  </ol>
  <div class="carousel-inner" role="listbox">
    <div id="img" class="carousel-item active">
    </div>
  </div>
</div>
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
tirth1620
  • 154
  • 1
  • 8
  • Any ideas how to add item active to the first slide? I was trying with the code below but it adds active class for all slides `$(document).ready(function () { $('#Carousel').find('.carousel-item').first().addClass('active'); });` – aphra Jun 17 '22 at 10:26
  • figure out active item index in carousal. if the index and array index match then adds an active class in a particular list item. arr.map((res,i)=>
  • );
    • – tirth1620 Jun 17 '22 at 11:10