Question

我正在尝试在不更改幻灯片的django应用程序的首页中添加引导轮播。

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)

我正在尝试在轮播上呈现具有精选帖子的帖子。它给我的是静态图片，没有任何幻灯片显示。

Answer 1

尝试一下...也别忘了包含引导样式。而且您能告诉我为什么要使用块{％if ...％}吗？在您的示例中这是没有用的。

{% assign legs = Predept.legs %}
{% for leg in legs %}
  <!-- Cool code & stuff here! -->
{% endfor %}

Answer 2

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

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

Bootstrap轮播模板在Django中不起作用

2 个答案: