[英]carousel in ejs and node.js not working while using foreach loop
I'm trying do a carousel dynamically but it's not working it's all render in same page how can I solve this I'm using ejs and node.js please check the code below below I try to add class dynamically but it's not working.................................................我正在尝试动态执行轮播,但它不起作用它全部呈现在同一页面上我该如何解决这个问题我正在使用 ejs 和 node.js 请检查下面的代码我尝试动态添加 class 但它不起作用.... ...................................................
<div id="multi-item" class="carousel slide carousel-multi-item mx-3" data-interval="false">
<!--Controls-->
<div class="controls-top">
<a class="btn-floating" id="prev-btn" href="#multi-item" data-slide="prev"><i
class="fa fa-chevron-left"></i></a>
<a class="btn-floating" href="#multi-item" data-slide="next"><i class="fa fa-chevron-right"></i></a>
</div>
<!--/.Controls-->
<!--Slides-->
<div class="carousel-inner pt-3 px-2"" role=" listbox">
<!--First slide-->
<% var i=0; %>
<!-- looping data -->
<% data.forEach((item,inx)=>{i++%>
<% if(inx==0 || inx%4==0){ %>
<div class="<%if(i==0){ %>
carousel-item active <% }else{%>
carousal-item
<% } %> ">
<div class="row row-cols-5 ">
<% } %>
<div class="col clearfix">
<div class=" card-img-top">
<a href="/home/movie/<%- item.movies[0]._id %> " class="imageoutlink">
<img style="border-radius:.9rem .9rem 0 0;height: 19rem ; object-fit: cover;"
src="http://localhost:3000/uploads/<%-item.movies[0].images[0].image_url%> "
class="img-fluid shadow-sm wp-post-image" alt="" loading="lazy" />
</a>
</div>
<div class="text-center"
style="width:100%;height: 1.6rem;border-radius: 0 0 .9rem .9rem ; background-color: #212529;; ">
<i class="fa fa-star" style="color: rgba(241, 237, 237, 0.974); "
aria-hidden="true"></i>
</div>
<div class="h5 mt-2 text-center" style="color:#333 ;">
<!-- <a href="https://demo.ramsthemes.com/projects/ingmarwp/movies/la-la-land/"
style="color: #333;"> -->
<span style="color: #333;">
<%-item.movies[0].movieName%>
</span>
</div>
</div>
<!-- loop end -->
<% }) %>
</div>
</div>
</div>
</div>```
Try ternary operator:尝试三元运算符:
<div class="<%= i === 0 ? "carousel-item active": "carousel-item" %>">
</div>
In ejs for giving in-place output you should use this operator:在ejs中用于提供就地输出,您应该使用此运算符:
<%= %>
I use some condition in end of the loop我在循环结束时使用了一些条件
<div class="carousel-inner pt-3 px-2"" role=" listbox">
<% var i=0; %>
<!-- looping data -->
<% upcoming.forEach((item, inx) => { i++%>
<% if (inx==0||inx%5==0) { %>
<div class="<%= i === 1 ? " carousel-item active":"carousel-item" %>">
<div class="row row-cols-5 ">
<% } %>
<div class="col clearfix">
<div class=" card-img-top">
<a href="/home/upcomingMovie/<%- item._id %> " class="imageoutlink">
<img
style="border-radius:.9rem .9rem 0 0;height: 19rem ; object-fit: cover;"
src="http://localhost:3000/uploads/<%-item.images[0].image_url%> "
class="img-fluid shadow-sm wp-post-image" alt=""
loading="lazy"
/>
</a>
</div>
<div
class="text-center"
style="width:100%;height:1.6rem;border-radius:0 0 .9rem .9rem; background-color: #212529;"
>
<i class="fa fa-star" style="color: rgba(241, 237, 237, 0.974);"
aria-hidden="true">
</i>
</div>
<div class="h5 mt-2 text-center" style="color:#333;">
<span style="color: #333;">
<%-item.movieName%>
</span>
</div>
</div>
<% if ((i % 5) == 0) { %>
</div></div>
<% } %>
<!-- loop end -->
<% }) %>
</div>
its a simple problem for a carousel,you need to have class="active" only in one image but when you are using for each loop you are doing active all photos.对于轮播来说,这是一个简单的问题,您只需要在一张图像中设置 class="active" ,但是当您使用每个循环时,您会激活所有照片。
try to add class="active" only in one slide.尝试仅在一张幻灯片中添加 class="active"。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.