Bootstrap 鹡鸰中的旋转木马不循环

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 #}部分

Bootstrap 鹡鸰中的旋转木马不循环

Bootstrap carousel in wagtail does not cycle

wagtail

bootstrap-4