Search code examples
djangopython-3.xbootstrap-4carousel

How to make Dynamic Carousel in django using Bootstrap 4


I'm trying to make dynamic carousel in django using Bootstrap 4. But still i can't do that. Anyone please help to done it. Thanks.

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

template

<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>

Solution

  • All items has "active" class, Did you try set first element on "active"?

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

    I propose test html with static img without django, if gallery work with static img then put some django code