Question

下午好，我想如何使用Bootstrap 4添加动态轮播？

Lemme解释，我正在使用API，我想要一张图片和两个文字：

我想＆＃34; data.pic.src＆＃34;成为我的形象，＆＃34; data.headline＆＃34;作为我的h3和data.kicker为p。

谢谢=）

＆＃13;

function(item) {
    let response = item.news
        .map(data =>
            `<h3 class="line">${data.headline}</h3>
             <P class="title">${data.kicker}</p><br>
             <img src="${data.pic_src}" alt="oops" class="imagem">`
        )
        .join('')
    news.innerHTML = response
    })
}

＆＃13;

<div id="carouselSite" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
          <li data-target="#carouselSite" data-slide-to="0" class="active"></li>
          <li data-target="#carouselSite" data-slide-to="1"></li>
          <li data-target="#carouselSite" data-slide-to="2"></li>
          <li data-target="#carouselSite" data-slide-to="3"></li>
          <li data-target="#carouselSite" data-slide-to="4"></li>
      </ol>
      <div class="carousel-inner image">
          <div class="carousel-item active">
              <img class="img-fluid d-block d-none d-md-block" src="" alt="imagem1">
              <div class="carousel-caption">
                  <h3>Lorem ipsum dolor sit amet</h3>
                  <p>Vivamus vestibulum, massa a porta pellentesque, neque nisi vestibulum ligula</p>
              </div>
          </div>
      </div>
      <a href="#carouselSite" class="carousel-control-prev" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon"></span>
          <span class="sr-only">Anterior</span>
      </a>
      <a href="#carouselSite" class="carousel-control-next" role="button" data-slide="next">
          <span class="carousel-control-next-icon"></span>
          <span class="sr-only">Próximo</span>
      </a>
</div>

＆＃13;

如何制作带有API内容的bootstrap轮播？

0 个答案: