Необходимо построить слайдер (карусель), который должен основываться на данных, возвращаемых вызовом API. Есть 3 значения, которые мне нужно вытащить. image , title и description .

Это должно быть picture , heading и description (на каждом слайде, взятом из JSON).

JQuery

 var myJSON = 'apiCall'; $.getJSON('myJSON, { get_param: 'value' }, function(data) { $.each(data, function(index, element) { $('body').append($('{amp}lt;img{amp}gt;', { })); }); }); 

HTML

  {amp}lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"{amp}gt; {amp}lt;ol class="carousel-indicators"{amp}gt; {amp}lt;li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li data-target="#carouselExampleIndicators" data-slide-to="1"{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;li data-target="#carouselExampleIndicators" data-slide-to="2"{amp}gt;{amp}lt;/li{amp}gt; {amp}lt;/ol{amp}gt; {amp}lt;div class="carousel-inner"{amp}gt; {amp}lt;div class="carousel-item active"{amp}gt; {amp}lt;img class="d-block w-80" src="..." alt="First slide"{amp}gt; {amp}lt;div class="carousel-caption d-none d-md-block"{amp}gt; {amp}lt;h5{amp}gt;{amp}lt;/h5{amp}gt; {amp}lt;p{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-item"{amp}gt; {amp}lt;img class="d-block w-80" src="..." alt="Second slide"{amp}gt; {amp}lt;div class="carousel-caption d-none d-md-block"{amp}gt; {amp}lt;h5{amp}gt;{amp}lt;/h5{amp}gt; {amp}lt;p{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="carousel-item"{amp}gt; {amp}lt;img class="d-block w-80" src="..." alt="Third slide"{amp}gt; {amp}lt;div class="carousel-caption d-none d-md-block"{amp}gt; {amp}lt;h5{amp}gt;{amp}lt;/h5{amp}gt; {amp}lt;p{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"{amp}gt; {amp}lt;span class="carousel-control-prev-icon" aria-hidden="true"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span class="sr-only"{amp}gt;Previous{amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"{amp}gt; {amp}lt;span class="carousel-control-next-icon" aria-hidden="true"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span class="sr-only"{amp}gt;Next{amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; 
 $.get('apiCall') .then(function(response) { var $carousel = $('#carouselExampleIndicators'); var $carouselInner = $carousel.find('.carousel-inner'); response.data.forEach(function(item, i) { var template = ''; if(i === 0) { template = '{amp}lt;div class="carousel-item active"{amp}gt;'; } else { template = '{amp}lt;div class="carousel-item"{amp}gt;'; } template  = '{amp}lt;img class="d-block w-80" src="'   item.image   '" alt="Second slide"{amp}gt;'; template  = '{amp}lt;div class="carousel-caption"{amp}gt;'; template  = '{amp}lt;h5{amp}gt;'   item.title_a   '{amp}lt;/h5{amp}gt;'; template  = '{amp}lt;p{amp}gt;'   item.category   '{amp}lt;/p{amp}gt;'; template  = '{amp}lt;/div{amp}gt;'; template  = '{amp}lt;/div{amp}gt;'; $carouselInner.append(template); }) $carousel.carousel(); }) 
 {amp}lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"{amp}gt; {amp}lt;div class="carousel-inner"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"{amp}gt; {amp}lt;span class="carousel-control-prev-icon" aria-hidden="true"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span class="sr-only"{amp}gt;Previous{amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"{amp}gt; {amp}lt;span class="carousel-control-next-icon" aria-hidden="true"{amp}gt;{amp}lt;/span{amp}gt; {amp}lt;span class="sr-only"{amp}gt;Next{amp}lt;/span{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; 

Привет, вот пример с jQuery и ES5 js. Я предлагаю вам использовать https://handlebarsjs.com/ для создания шаблонов HTML. Это будет выглядеть лучше.

 let html = ` {amp}lt;div class="carousel-item"{amp}gt; {amp}lt;img class="d-block w-80" src="${imgSrc}" alt="Second slide"{amp}gt; {amp}lt;div class="carousel-caption d-none d-md-block"{amp}gt; {amp}lt;h5{amp}gt;${title}{amp}lt;/h5{amp}gt; {amp}lt;p{amp}gt;${parangraph}{amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; ` $(".carousel-inner")[0].append(html) 

Поместите приведенный выше код в цикл, и все должно быть готово. ImgSrc, title и parangraph должны динамически генерироваться из ваших вызовов API.