如何解决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,但遇到了完全相同的问题。
任何帮助将不胜感激:)
这是有问题的模板 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 举报,一经查实,本站将立刻删除。