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

Question

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

Answer 1

所有项目都有 "active" class，您是否尝试在 "active" 上设置第一个元素？

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

我建议在不使用 django 的情况下使用静态 img 进行测试 html，如果画廊使用静态 img 则添加一些 django 代码

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

How to make Dynamic Carousel in django using Bootstrap 4

django

carousel

python-3.x

bootstrap-4