动态加载图像时轮播问题

Question

我用过bootstrapmaterial轮播。当我加载图像 statically.Like:

时它工作正常

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

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

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

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

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

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

Answer 1

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

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

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

动态加载图像时轮播问题

Problem with carousel while loading image dynamically

javascript

css

node.js

express-handlebars