为什么引导轮播和 django 无法正常工作？答案

【问题标题】：Why bootstrap carousel and django not workig properly?为什么引导轮播和 django 无法正常工作？
【发布时间】：2021-11-12 22:41:45
【问题描述】：

我正在尝试使用 django 提供引导轮播后端。我编写了一个简单的程序视图，它将所有图像传递给模板。但是当我运行该程序时，我没有按预期得到输出，所有图像都呈现为相邻另一个。没有什么像前进和后退按钮之类的了。我正在发布我的视图和模板。

提前致谢。

希望你早日来到这里。

查看：-

def TaggingView(request):
    queryset = MyImage.objects.filter(is_tagged=False)
    return render(request, "taggging.html", {'files': queryset})

模板：-

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div id="carouselInd" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        {% for file in files %}
        {% with forloop.counter0 as i %}
        <div class="carousel-item {% if i is 0 %}active{% endif %}">
            <img class="d-block w-100" src="{{ file.image.url }}" alt="" style="height: 30rem;">
        </div>
        {% endwith %}
        {% endfor %}
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
</body>
</html>

输出：-

【问题讨论】：

您的所有图像都包含在<div> 中，active 作为classes 之一...
@WillemVanOnsem 对不起，我不明白.. 请
所有图片都包裹在<div class="carousel-item active">中，所以active...
@WillemVanOnsem 所以我需要做什么，我没有足够的引导知识，我是新的后端开发人员，所以请......
@WillemVanOnsem 我试图删除
，它没有用...如何解开所有图像

标签： django bootstrap-4

【解决方案1】：

Django 可以很好地与 Bootstrap 轮播一起使用，您需要注意这样的活动类：

<div id="carouselInd" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        {% for file in files %}
        {% with forloop.counter0 as i %}
        <div class="carousel-item {% if i is 0 %}active{% endif %}">
            <img class="d-block w-100" src="{{ file.image.url }}" alt=" 
            {{ file.name }}" style="height: 30rem;">
        </div>
        {% endwith %}
        {% endfor %}

    </div>
</div>

注意： alt 属性是动态的，如果需要，您可以使用静态值。并且给图片一个height也可以帮助包含图片。

【讨论】：

它不工作..对不起，我像以前一样得到保存输出
请给我看一张图片
我已经更新了模板并添加了我得到的输出。请看看谢谢你的帮助和支持
你的引导程序加载好了吗？你在哪里加载引导库？
看看模板代码我已经添加了整个模板代码