Шаблон загрузочной карусели не работает в Django

Question

Я пытаюсь добавить загрузочную карусель на мою домашнюю страницу в приложении django, слайд не меняется.

шаблоны / сообщений / 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)

Я пытаюсь отобразить сообщение с избранным сообщением true на карусели. Это просто статичное изображение без слайд-шоу.

Answer 1

Назовите карусель поверх JavaScript (добавьте это в свой HTML):

<script>
$('.carousel').carousel()
</script>

Answer 2

Попробуйте это ... Также не забудьте включить стили начальной загрузки. А также не могли бы вы сказать мне, почему вы используете блок {% if ...%}? Это бесполезно в вашем примере.

{% 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 %}