I have started to maintain a site already built and I have been asked to add a carousel. I have integrated a model:
class Event(models.Model):
tag = models.CharField(max_length=100, verbose_name="Tag")
title = models.CharField(max_length=200, verbose_name="Título")
description = models.TextField(verbose_name="Descripción", help_text='Añade una breve descripción de no más de 200 carácteres')
image = models.ImageField(upload_to='specialevents_slider', blank=True, null=True, verbose_name="Imagen")
link = models.URLField(null=True, blank=True, name="view_more", verbose_name="Ver más")
created = models.DateTimeField(auto_now_add=True, verbose_name="Fecha de creación")
updated = models.DateTimeField(auto_now=True, verbose_name="Fecha de modificación")
class Meta:
verbose_name = "evento"
verbose_name_plural = "eventos"
ordering = ["-created"]
def __str__(self):
return self.title
I've integrated it into the admin
admin.site.register(Event)
I created a template so that the templates of each of the sliders were made (slider.html)
<img class="d-block w-100" src="{{event.image.url}}" alt="slide" />
<div class="carousel-caption d-none d-md-block header_bg">
<h3>{{event.tag}}</h3>
<h1>{{event.title}}</h1>
<p>{{event.description}}</p>
<a href="{{event.view_more}}"> <button type="button" class="btn btn-outline-dark">Ver más</button></a>
</div>
I have also developed the HTML code base where my slider.html (home.html) will be integrated
{% if events %}
<div id="carouselSpecialEvents" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
{% for event in events %}
<li data-target="#carouselSpecialEvents" data-slide-to="{{forloop.counter0}}" {%if forloop.counter0 == 0%}class="active"{%endif%}"></li>
{% endfor %}
</ol>
<div class="carousel-inner">
<div class="carousel-item">
{% for event in events %}
{% include 'slider.html'%}
{% endfor %}
</div>
</div>
<a class="carousel-control-prev" href="#carouselSpecialEvents" 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="#carouselSpecialEvents" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
{% else %}
<div id="defaulSlider" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="{{STATIC_URL}}./specialevents_slider/fondify.jpeg" alt="First slide">
<div class="header_bg"></div>
</div>
</div>
</div>
{% endif %}
and I even added it to my views ...
events = Event.objects.all()
The problem is that when loading the site, if the elements appear but are not displayed in the browser
I tried to use the scope of jquery ($('#carouselSpecialEvents').carousel()
) to run the carousel at the end of loading the page but it did not work,
IMPORTANT NOTE: It works correctly if the carousel is static, that is, I do not use the {%for%}
, if I do not add the {%for%}
, it is displayed correctly but I can not iterate between my database elements.
Djando 2.0.2 Python 3.6
I hope you can help me. Thanks :)