реализация карусели, которая встраивает текст в контейнеры

Question

Я могу отобразить набор контейнеров с текстом в них, чтобы они выглядели как маленькие карточки на моей веб-странице, но хотел бы иметь возможность отображать их в вертикальной карусели

Вот код, который яписал (а):

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

к сожалению, я не могу заставить работать карусель.Может кто-нибудь сказать мне, что я могу делать не так?