Bootstrap carousel template not working in django - django

Question

I am trying to add bootstrap carousel to my home page in django app it is not changing slide.
templates/posts/index.html
{% extends "posts/base.html" %}
{% block content %}
<div class="container pt-3 mh-50">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for fpost in featured_post %}
{% if forloop.counter == 1 %}
<div class="carousel-item active">
{% else %}
<div class="carousel-item">
{% endif %}
<img src="{{fpost.thumbnail.url}}" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>{{fpost.title}}</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
{% endfor %}
</div>
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
views.py
def index(request):
featured = Post.objects.filter(featured = True) #put this on carousel
latest_post = Post.objects.order_by('-timestamp')[:6]
startup_post = Post.objects.filter(category__title__iexact='startup')[0:3]
opinion_post = Post.objects.filter(category__title__iexact='opinion')[0:3]
# add a video field here
context = {
'featured_post': featured,
'latest_post': latest_post,
'startup_post': startup_post,
'opinion_post': opinion_post
}
return render(request, 'posts/index.html', context)
I am trying to render post with featured post true on carousel. It is giving me just static picture without any slideshow.

Answer 1

Try this...Also don't forget to include bootstrap styles.
And also could you tell me why are you using block {% if ...%}? It is useless in you example.
{% extends "posts/base.html" %}
{% block content %}
<div class="container mt-5">
<div class="bd-example">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
{% for fpost in featured_post %}
<div class="carousel-item active">
<img src="{{fpost.thumbnail.url}}" class="d-block img-responsive" height="650px !important" width="100%">
<div class="carousel-caption d-none d-md-block">
<h5>{{fpost.title}}</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
{% endfor %}
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
{% endblock %}

Answer 2

Call the carousel over javascript (add this inside your html):
<script>
$('.carousel').carousel()
</script>