时间戳

首页 > 解决方案 > 为什么引导轮播和 django 不能正常工作？

django - 为什么引导轮播和 django 不能正常工作？

问题描述

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

输出：-

我得到的输出..

标签： djangobootstrap-4

解决方案

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图像加上一个也可以帮助包含图像。

推荐阅读