Issue
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
Answered By - GGG205
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.