我可以渲染一组带有文本的容器,以便它们看起来像我网页上的小卡片,但希望能够在垂直轮播中渲染它们
这是我编写的代码:
<div class="container">
<div id="carouselExampleControls" class="carousel vert container" data-ride="carousel">
<div class="carousel-inner">
{% for k in posts.keys() %}
<div class="item {% if loop.index == 1 %}active{% endif %}" id="slide{{ loop.index }}">
<article class="media content-section">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2" href="#">{{ posts[k]['Title1'] }}</a>
<small class="text-muted">{{ posts[k]['Posted'] }}</small>
</div>
<!-- <h2><a class="article-title" href="#">{{ posts[k]['Title2'] }}</a></h2> -->
<p class="article-content">{{ posts[k]['Abstract'][:450] }}... </p>
</div>
</article>
</div>
{% endfor %}
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
不幸的是,我无法让轮播工作。谁能告诉我我可能做错了什么?