How to set up a slider (carousel) in a django template?

Question

Django

Using boostrap 4, I created a slider (infused from templates). With the help of django-filer, I created a folder for the model and displayed all the images. But the slider (carousel) itself does not change (scroll) the images and displays 2 images by id, there are only 4 of them. Here is the code, please indicate the errors:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    {% for id in plots.imgPlots.files %}

        <li data-target="#carouselExampleIndicators" data-slide-to="{{id}}"></li>
    {% endfor %}
    </ol>
        <div class="carousel-inner">
            {% for img in plots.imgPlots.files %}
                <div class="carousel-item active">
                    <img  class="d-block w-100" src ="{{ img.url }}" alt="Третий слайд">
                </div>
            {% endfor %}
        </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
</div>

Here is the slider

Answer 1

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner ">
      {% for img in plots.imgPlots.files %}
        <div class="carousel-item">
              <img src="{{ img.url }}" class="d-block w-100" alt="{{id}}">
        </div>
      {% endfor %}
      <div class="carousel-item active">
        <img src="{{ plots.imgPlot.url }}" class="d-block w-100" alt="{{id}}">
      </div>
      </div>
    <a class="carousel-control-prev" href="#carouselExampleSlidesOnly" 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="#carouselExampleSlidesOnly" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
</div>

This is the solution. As it turned out, you can’t put a folder with files in the template, you need to create an additional 1 photo and make it the main one (active)