如何使用 Bootstrap 4 在 django 中制作动态轮播答案

【问题标题】：How to make Dynamic Carousel in django using Bootstrap 4如何使用 Bootstrap 4 在 django 中制作动态轮播
【发布时间】：2020-06-27 07:10:44
【问题描述】：

我正在尝试使用 Bootstrap 4 在 django 中制作动态轮播。但我仍然不能这样做。请任何人帮助完成它。谢谢。

views.py

def dept(request, name):
    dept_detail = department_detail.objects.get(name = name )

    depts_detail = departments.objects.get(name = name )
    course = depts_detail.course_set.all()
    carousel =  depts_detail.carousel_set.all()
    context = {'dept': dept_detail, 'courses':course, 'carousel':carousel}
    return render(request, "Departments/dept.html", context)

models.py

class carousel(models.Model):
    Department = models.ForeignKey(departments,on_delete=models.CASCADE, null = True)
    Image = models.ImageField(upload_to='Carousel', null = True)
    Img_title = models.CharField(max_length=30, null=True)
    Img_desc = models.CharField(max_length=500, null=True)
    date_created = models.DateTimeField(auto_now_add=True, null=True)

    def __str__(self):
        return self.Department.name

模板

<div id="gallery" class="carousel slide carousel-fade" data-ride="carousel" data-aos="fade-up" data-aos-delay="300">

      <ul class="carousel-indicators" >
        <li data-target="#gallery" data-slide-to="0" class="active"></li>
        <li data-target="#gallery" data-slide-to="1"></li>
        <li data-target="#gallery" data-slide-to="2"></li>
      </ul>

      <div class="carousel-inner">
          {% for img in carousel %}  
        <div class="carousel-item active" data-interval="100">

          <img src="{{img.Image.url}}" class="d-block  w-100" alt="...">
          <div class="carousel-caption d-none d-md-block rounded position-absolute bg-custom">
              <h5>{{img.Img_title}}</h5>
              <p>{{img.Img_desc}}</p>
            </div>
        </div>
        {% endfor %}  
</div>

【问题讨论】：

您的问题是什么，请说明问题出在哪里
我的问题出在模板中。我无法使用存储在数据库中的图像制作轮播（图库）。我该如何解决这个问题.. 如果我在轮播部门之外执行相同的 forloop，它可以完美地作为普通图像而不是轮播

标签： django python-3.x bootstrap-4 carousel

【解决方案1】：

所有项目都有“活动”类，您是否尝试将第一个元素设置为“活动”？

 <div class="carousel-item {% if forloop.counter0 == 0 %}active{% endif %}" data-interval="100">

我建议在没有 django 的情况下使用静态 img 测试 html，如果画廊使用静态 img 则放一些 django 代码

【讨论】：