Problems loading CSS styles in Django project

2

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

    
asked by Dulce Lemus 26.11.2018 в 03:44
source

0 answers