Слайдер карусели, показывающий изображения в списке с django

Question

Я новичок в django, и я создаю веб-сайт, который показывает изображения продуктов на домашней веб-странице в виде ползунка Карусель (bootstrap 4).

{%extends 'blog/base.html'%}

    {%block content%}

    <ol class="carousel-indicators">

    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>

    <li data-target="#myCarousel" data-slide-to="1"></li>

    <li data-target="#myCarousel" data-slide-to="2"></li>

    <li data-target="#myCarousel" data-slide-to="3"></li>

    <li data-target="#myCarousel" data-slide-to="4"></li>

    <li data-target="#myCarousel" data-slide-to="5"></li>

</ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

    {% for p in products %}

    {% if forloop.counter == 1 %}

    <div class="item active">

    {% else %}

    <div class="item">

    {% endif %}

        <img src="{{ p.image.url }}" alt="Image" width="460" height="345">

  <div class="carousel-caption">

    <h3>{{ p.name }}</h3>

    <p>{{ p.description }}</p>

  </div>

    </div>

    {% endfor %}

    </div>

    <!-- Left and right controls -->

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

        <span class="sr-only">Previous</span>

    </a>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

        <span class="sr-only">Next</span>

    </a>

    {%endblock content%}

Но этот код показывает только все изображения по прямой линии без кнопок сбоку. Я предоставил вывод: Изображения в строке Я хочу, чтобы все изображения в формате слайдера с помощью кнопок навигации Спасибо