Javascript 动态加载图像时转盘出现问题

我用过自助材料传送带。静态加载图像时效果很好。例如：

<div class="row"  >
    <div class="container-fluid">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
            <div class="carousel-inner">

                <div class="carousel-item active">
                    <div class="view">
                        <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(15).jpg" alt="First slide">
                        <div class="mask rgba-black-slight"></div>
                    </div>

                    <div class="carousel-caption">
                        <h3 class="h3-responsive">First Event</h3>
                        <p>This is our first event.</p>
                    </div>
                </div>

                <div class="carousel-item">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(16).jpg" alt="Second slide">

                <div class="carousel-caption">
                    <h3 class="h3-responsive">Second Event</h3>
                    <p>This is our second event.</p>
                </div>

                </div>

                <div class="carousel-item">
                <img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(17).jpg" alt="Third slide">

                <div class="carousel-caption">
                    <h3 class="h3-responsive">Third Event</h3>
                    <p>This is our third event.</p>
                </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <i class="material-icons">keyboard_arrow_left</i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <i class="material-icons">keyboard_arrow_right</i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

第一件事
这是我们的第一次活动

第二件事
这是我们的第二次活动

第三件事
这是我们的第三项活动

但当我从数据库中动态加载图像时，carousel的图像在块视图中分裂，carousel不再工作。就像我这样加载：

<div class="row"  >
    <div class="container-fluid">
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" data-interval="1000">
            <div class="carousel-inner">


                {{#each events}}
                <div class="carousel-item active">
                    <div class="view">
                        <img class="d-block w-100" src="/uploads/{{file}}" alt="First slide">
                        <div class="mask rgba-black-slight"></div>
                    </div>

                    <div class="carousel-caption">
                        <h3 class="h3-responsive">{{title}}</h3>
                        <p>{{description}}</p>
                    </div>
                </div>
                {{/each}}



            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <i class="material-icons">keyboard_arrow_left</i>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <i class="material-icons">keyboard_arrow_right</i>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

{{{#每个事件}
{{title}}
{{description}}

{{/每个}}

当我以这种方式加载时，图像会在块视图中一个接一个地显示，而不是旋转木马

我可以看到这些图像，但不是旋转木马。我的意思是，我从后端获取图像，但它们显示得不好。 对于种类信息，我使用NodeJS和Handlebar作为模板引擎

---

这里怎么了？我不熟悉node，如果这是一个简单的问题，我很抱歉。

所有幻灯片中都包含类

活动
，这就是为什么所有幻灯片都可见的原因。


首先，删除幻灯片中的类
active
，使用
jQuery
可以：

$（'.carousel item:FIrst child'）。addClass（'active'）
。





这将为找到的第一个节点
.carousel项目
添加类
active
。


希望有帮助。

干杯。
你是如何用js启动旋转木马的？不，我没有。我刚刚粘贴了我在那里找到的代码，它按预期工作。我需要初始化它吗？检查控制台日志，看看发生了什么。很可能您需要一个js来运行carousel，它应该从模板复制过来。我的朋友，您正在告诉carousel，所有幻灯片都是“活动的”，使用jQuery您可以$（'.carousel item:first child'）。addClass（'active'））