Currently, I am tackling a bootstrap slider project, where the images are all in place, and they transition every few seconds. Everything appears to be functioning correctly, except for the animation display. The image changes suddenly without any smooth transition. Take a look at the code below:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{% static 'img/slider1.png' %}" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/slider2.jpg' %}" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="{% static 'img/slider3.jpg' %}" alt="Third slide">
</div>
</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>
Important to note, I am utilizing Django and have already loaded {% static %} without any issues. Additionally, I have included the necessary Bootstrap scripts.