引导轮播模板在 django 中不起作用答案

【问题标题】：Bootstrap carousel template not working in django引导轮播模板在 django 中不起作用
【发布时间】：2020-04-16 03:28:57
【问题描述】：

我正在尝试在 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)

我正在尝试在轮播上呈现带有特色帖子的帖子。它只给我静态图片，没有任何幻灯片。

【问题讨论】：

你检查生成的 HTML 中carousel-items 的数量了吗？数量和您的预期一样多吗？
是的，只有三个帖子的特色为 true 。
那么这是一个 JS 或 HTML 问题 - 检查所需的 JS 文件是否已加载，并且 HTML 看起来是否完全正常。
我在 base.html 文件中使用 bootstrap cdn
你能把你的 base.html 贴在你包含 jquery.js 的地方吗？

标签： django bootstrap-4

【解决方案1】：

试试这个...也不要忘记包含引导样式。你能告诉我你为什么要使用块 {% 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 %}

【讨论】：

【解决方案2】：

通过 javascript 调用轮播（将其添加到您的 html 中）：

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

【讨论】：