将文本嵌入容器的轮播的实现

时间:2019-07-10 15:17:46

标签: flask bootstrap-4 carousel

我可以渲染一组带有文本的容器,以便它们看起来像我网页上的小卡片,但希望能够在垂直轮播中渲染它们

这是我编写的代码:

<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>

不幸的是,我无法让轮播工作。谁能告诉我我可能做错了什么?

0 个答案:

没有答案