python - 如何在 for 循环中设置工作引导轮播?
问题描述
我正在尝试在烧瓶应用程序中制作一个轮播,该应用程序通过循环显示数据库中的所有图像,我发现了类似的问题,但答案对我不起作用。
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for raffle in query %}
<div class="carousel-item {% if loop.index == 1 %} active {% endif %}" id="slide{{ loop.index }}">
<img src="{{ raffle.IMAGES }}">
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#pageCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#pageCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-primary" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
循环中的第一个图像按原样显示,但滑动键不执行任何操作。如何使循环中的所有图像正常工作?
解决方案
控件元素的属性href
应具有外部轮播的属性:a
id
div
<a class="carousel-control-prev" href="#carouselExampleControls" ...
“下一个”控件也是如此。
推荐阅读
- c# - 无法翻译 LINQ 表达式 DbSet<>.Any
- java - Eclipse - YAML 错误:需要一个“字符串”但有一个“映射”节点
- vbscript - 在 VBScript 中使用 AND 运算符在两个数字之间计算什么?
- image - 如何使用 Matlab 将图像裁剪成重叠的补丁?
- c++ - 在 C++ 中使用向量时,我是如何在这里遇到分段错误的?
- html - 为什么我不能使用复选框动画汉堡菜单栏更改为 X?
- julia - Julia:跨观察张量广播成对距离计算
- android - 在 kotlin 和 android 项目上使用 gradle 有什么好处?
- javascript - 如何从 ReactJS 中的 400 http 响应中获取响应数据
- postgresql - 将 PostgreSQL 与 PyQt5 一起使用的正确方法是什么