如何使用 Vanilla Js 循环轮播项目答案

【问题标题】：How to loop over carousel items using Vanilla Js如何使用 Vanilla Js 循环轮播项目
【发布时间】：2021-05-22 06:32:59
【问题描述】：

我正在从电影数据库中获取数据，我希望将检索到的数据显示在我的页面中的带有 3 张幻灯片的轮播卡片上。这是我到目前为止所做的， html,

 <div class="details"><!--Movie details are to be displayed here--></div>

Js，

<script type="text/javascript">
function arrangement(resultFromServer) {
  let gridHtml=" ";
let poster= "https://image.tmdb.org/t/p/w185/";
let element= document.querySelector(".details");
let index= [].indexOf.call(element.parentElement.children, element);

let selected = resultFromServer.results[index];
for (let i = 0; i < resultFromServer.results.length; i++) {
const movieResults =resultFromServer.results[i];
gridHtml += `
<div id="multi-item-example" class="carousel slide carousel-multi-item" data-ride="carousel">

<!--Indicators-->
<ol class="carousel-indicators">
<li data-target="#multi-item-example" data-slide-to="0" class="active"></li>
<li data-target="#multi-item-example" data-slide-to="1"></li>
<li data-target="#multi-item-example" data-slide-to="2"></li>
</ol>
<!--/.Indicators-->

<!--Slides-->
<div class="carousel-inner" role="listbox">

<!--First slide-->
<div class="carousel-item active">

<div class="row">
  <div class="col-md-4">
    <div class="card mb-2">
      <img class="card-img-top" src="${poster}${movieResults.poster_path}"
        alt="Card image cap">
      <div class="card-body">
        <h4 class="card-title">${movieResults.title}</h4>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the
          card's content.</p>
        <a class="btn btn-primary">Button</a>
      </div>
    </div>
  </div>
        </div>
        </div>
        </div>`;

}
let myPage= document.querySelector(".details");
myPage.innerHTML=gridHtml;
}
</script>

我从中得到的是电影细节以垂直排列的形式返回。有人可以帮忙吗！

【问题讨论】：

标签： javascript html css bootstrap-4 carousel

【解决方案1】：

您需要使用 querySelector 来检查“活动”类。

 function myFunction(e) {
  var carousel = document.querySelector(".active");
  if(carousel !==null){
   carousel.classList.remove("active");
  }
 e.target.className = "active";
}

querySelector 用于在页面上查找活动类，如果存在（if 语句）然后将其删除并将活动类应用于下一个元素，遍历整个集合。

【讨论】：