bootstrap-4 - 鹡鸰中的引导轮播不循环

Question

我有一个带有三个图像的轮播：

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        {% for loop_cycle in self.carousel_images.all %}
            {% image loop_cycle.carousel_image fill-900x100 as img %}
            <p>{{ img.url }}</p>
            <div class="carousel-item{% if forloop.counter ==  1 %} active{% endif %}">
<!--                    <img src="{{ img.url }}" class="d-block w-100" alt="{{ img.alt }}">-->
                {{ forloop.counter }} &nbsp {{ img.url }}
            </div>
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

所有三张图像都加载到轮播中，但只显示了一张（取决于比较 (x) 中的值）

if forloop.counter ==  x

单击上一个和下一个图标没有效果（在 Firefox 和 Epiphany 中测试）。

可能有什么问题？

Answer 1

使用@gasman 的策略我解决了它。我比较了html的两种情况。

我错过了 Bootstrap 行

 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity=" ....

来自我的 {# Global javascript #} 部分