Django with Bootstrap Carousel

Question

My code it's displaying image but not changing the image in the bootstrap carousel when I click the button to pass

                {% if variation.extravariationproductpicture_set.all %}
                  <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        {% for picture in variation.extravariationproductpicture_set.all %}
                         
                              <div class="carousel-item  {% if forloop.first %} active {% endif %}">
                                <img class="d-block w-100" src="{{picture.image.url}}" alt="First slide">
                              </div>

                        {% endfor %}
                    </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>
                {% endif %}