Bootstrap 和 MD Bootstrap Carousel 在 Django 中不起作用

问题描述

所以我试图将一个简单的 MD Bootstrap carousel 添加到 django 模板,但是,它只加载第一个图像并且控件不起作用。

我关注了这篇关于如何集成 MD Bootstrap 的文章 https://mdbootstrap.com/articles/jquery/how-to-integrate-mdbootstrap-with-django/,但我觉得有些导入不太有效。我还确保 LEFT JOIN 实际上是在查询我想要的图像。我还尝试用普通的 BS carousel 替换 MDB Carousel,但遇到了完全相同的问题。

任何帮助将不胜感激:)

Here is a picture of how it looks

这是有问题的模板 other_banner_images,我修改https://mdbootstrap.com/docs/standard/components/carousel/

home.html

这是我的<!-- Carousel wrapper --> <div id="carouselBasicExample" class="carousel slide carousel-fade" data-mdb-ride="carousel" > <!-- Indicators --> <ol class="carousel-indicators"> <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="0" class="active"></li> <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="1"></li> <li data-mdb-target="#carouselBasicExample" data-mdb-slide-to="2"></li> </ol> <!-- Inner --> <div class="carousel-inner"> <!-- Single item --> <div class="carousel-item active"> <img src="{{ default_banner_image.image.url }}" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>{{ default_banner_image.text }}</h5> <p>{{ default_banner_image.sub_text }}</p> </div> </div> {% for image in other_banner_images %} <!-- Single item --> <div class="carousel-item"> <img src="{{ image.image.url }}" class="d-block w-100" alt="..." /> <div class="carousel-caption d-none d-md-block"> <h5>{{ image.text }}</h5> <p>{{ image.sub_text }}</p> </div> </div> {% endfor %} </div> <!-- Inner --> <!-- Controls --> <a class="carousel-control-prev" href="#carouselBasicExample" role="button" data-mdb-slide="prev" > <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">PrevIoUs</span> </a> <a class="carousel-control-next" href="#carouselBasicExample" role="button" data-mdb-slide="next" > <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> </div> <!-- Carousel wrapper -->

base.html

附带说明:WOW.init() 脚本有什么作用,是否有必要?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)