动态生成N个轮播,每个轮播包含1个或多个图像。我想以整洁的方式以网格格式显示它们。现在,它以水平格式显示。
当前形成:
我正在使用Bootstrap4。有没有办法实现我想要的?
现有代码,使用jinja模板:
{% for track_id, image_path in image_urls.items %}
<div>
<div id="nCarousel" class="carousel slide" data-ride="carousel" data-interval="500">
<div class="carousel-inner">
{% for ip in image_path %}
<!-- <h1> Index: {{ forloop.counter }}</h1> -->
{% if forloop.counter == 1 %}
<div class="carousel-item active">
<img class="d-block w-100" src="{{ ip }}" >
</div>
{% endif %}
<div class="carousel-item">
<img class="d-block w-100" src="{{ ip }}" >
</div>
{{ forloop.length }}
{% endfor %}
</div>
<a class="carousel-control-prev" href="#nCarousel" 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="#nCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
{% endfor %}
<style> .carousel {
width:180px;
height:180px;
}</style>
最佳答案
看看这个code snippet。我想这就是您要寻找的。