Django carousel gallery with small pictures on the bottom using models.py - django-templates

Question

Gallery with carousel
I created a gallery like on the attached picture. I have no problem when I am linking picture from hard drive. I can preview those small pictures in main carousel view by clicking on the them and also using controll buttons on carousel.
The problem I have is how to have the same functionality when loading pictures from the model? The small images after click are displayed randomly on main carousel view.
How to link data-bs-slide-to="" ? Or there is another option?
Below code from liniking from hard drive and using database.
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static 'bpage/img/f1r.jpg' %}" class="rounded d-block img-fluid mx-auto" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f2r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f3r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f4r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
</div>
<!--rest of the carousel-->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!--- imagaes below carousel-->
<div class="row" >
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">
<div class="row row-cols-2 row-cols-sm-4">
<div class="col">
<img src="{% static 'bpage/img/f1r.jpg' %}" class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="0">
</div>
<div class="col">
<img src="{% static 'bpage/img/f2r.jpg' %}" class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="1">
</div>
<div class="col">
<img src="{% static 'bpage/img/f3r.jpg' %}" class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="2">
</div>
<div class="col ">
<img src="{% static 'bpage/img/f4r.jpg' %}" class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="3">
</div>
</div>
</div>
</div> ```
Gallery created with models.py
```<div class="container">
<div class="row ">
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
{% for product in products %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img src="{{ product.image.url }}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
{% endfor %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--- imagaes below carousel-->
<div class="container">
<div class="row" >
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">
<div class="row row-cols-sm-4 row-cols-2">
{% for product in products %}
<img src="{{ product.image.url }}" class="rounded mt-2" data-bs-target="#carouselExampleControls" data-bs-slide-to="">
{% endfor %}
</div>
</div>
</div> ```

Answer 1

Are you using a for loop to get your images from the model? If you are, then you might be able to map it like this:
data-bs-slide-to="{{ forloop.counter |add:"-1" }}
Which, assuming you are using a for loop to display every image , will backlink your thumbnails to your images.