javascript - 动态加载图像时轮播问题

Question

我使用了引导 Material 轮播。当我静态加载图像时它工作正常。喜欢:

<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>

但是当我从数据库加载图像时，即动态地，轮播的图像在 block View 中 split ，轮播不再工作。就像我以这种方式加载时一样:

<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>

当我以这种方式加载图像时，图像会在 block View 中一个接一个地显示，而不是轮播。

我可以看到那些图片，但不能作为轮播。我的意思是我从后端获取图像，但显示效果不佳。为了提供有用的信息，我使用了 node js 和 handlebars 作为模板引擎。

这里有什么问题？我是 Node 的新手，如果这是一个简单的问题，我很抱歉。

Answer 1

active 类包含在所有幻灯片中，这就是所有幻灯片都可见的原因。
首先，删除类 active 在幻灯片中，使用 jQuery 您可以:

$('.carousel-item:first-child').addClass('active').

https://api.jquery.com/first-child-selector/
这将为找到的第一个 Node .carousel-item 添加类 active。
希望对您有所帮助。
干杯。