微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。