When rendering data to the templates through database for carousel, the active class seems to create a problem for many of the beginners. When you use for loop logic to iterate over your slider in the front end, the loop will create three carousels with class set active to each. To avoid this you can use if-else syntax inside the for loop. A simple example would be this one.
<div class="carousel-inner" role="listbox">
{% for j in image_slider %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img src="{{j.slider_img.url}}">
<div class="carousel-caption text-center">
<h1>{{j.main_heading}}</h1>
<h3>{{j.sub_heading}}</h3>
</div>
</div>
{% endfor %}
The above code will set carousel class 'active' for the first loop and then the rest of the class, it won't and your carousel will work perfectly fine. Here's what I have been working on.
My slider working fine. These are fetched directly from the admin dashboard. Logo and slider samples are taken from Internet and I am not creating this one for business or selling purposes, just for fun :). Cheers to Stack Overflow.