EJS结合Node.js使用forEach循环时carousel轮播渲染异常

你的多图轮播失效是4个明确的代码错误导致的：

• 类名拼写错误：非激活轮播项的类名你写成了carousal-item，Bootstrap Carousel识别的标准类名是carousel-item，拼写错误会导致轮播项的默认隐藏样式、切换逻辑全部失效
• 激活类判断逻辑失效：你初始化计数器i=0后，进入forEach循环第一行就执行i++，第一次循环时i已经是1，后续if(i==0)的判断永远不成立，第一个轮播项根本拿不到active类，轮播组件初始化就会失败
• DOM结构拆分逻辑错误：你只在每4个元素的起始位置打开carousel-item和内部row的标签，循环结束后只做了一次标签闭合，所有渲染出来的内容都会被塞进第一个创建的轮播项容器里，根本没有按4个一组拆分出独立的轮播页，自然所有内容全堆在同一页显示
• 语法小错误：carousel-inner容器的class属性多写了一个双引号，会导致HTML属性解析异常

<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">
        <% data.forEach((item,inx)=>{ %>
            <%-- 每4个元素为一组，新建轮播项 --%>
            <% if(inx%4 == 0){ %>
                <%-- 除了第一组，前面的组要先闭合标签 --%>
                <% if(inx != 0){ %>
                    </div>
                </div>
                <% } %>
                <%-- 第一个轮播项加active类 --%>
                <div class="carousel-item <%= inx == 0 ? 'active' : '' %>">
                    <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 ;">
                    <span style="color: #333;">
                        <%-item.movies[0].movieName%>
                    </span>
                </div>
            </div>
        <% }) %>
        <%-- 循环结束，闭合最后一组的标签 --%>
        </div>
    </div>
</div>

• 去掉了多余的计数器i，直接用循环自带的inx索引判断轮播项位置，逻辑更简单不会出错
• 修正了类名拼写错误，第一个轮播项的active类直接通过inx==0判断添加
• 调整了标签闭合逻辑：每新建一组轮播项前，先把上一组的标签闭合，循环全部结束后再闭合最后一组的标签，保证每4个卡片刚好被包裹在独立的carousel-item容器里
• 清理了所有多余的引号、冗余空格，避免HTML解析异常

内容的提问来源于stack exchange，提问作者abhijith v