7

He empezado a dar mantenimiento a un sitio ya construido y me han pedido que añada un carousel. He integrado un modelo:

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

Lo he integrado al admin

admin.site.register(Event)

Generé una template para que se hicieran las platillas de cada uno de los sliders (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>

He elaborado tambien la base de codigo HTML donde va a ir integrado mi slider.html (home.html)

    {% 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 %}

e incluso lo añadí a mis views...

events = Event.objects.all()

El problema es que a la hora de cargar el sitio, si aparecen los elementos pero no se muestran en el navegador

introducir la descripción de la imagen aquí

He intentado utilizar el scope de jquery ($('#carouselSpecialEvents').carousel()) para ejecutar el carousel al finalizar la carga de la pagina pero no ha funcionado,

NOTA IMPORTANTE: Funciona correctamente si el carousel es estático, o sea, que no utilizo los {%for%}, si no añado el {%for%}, se visualiza correctamente pero no puedo iterar entre mis elementos de la base de datos.

Djando 2.0.2 Python 3.6

Espero puedan ayudarme. Gracias :)

4
  • 1
    Entiendo que lo que te pasa no es que no se carguen los estilos, como indicas en el título. Por lo que veo en el contenido de tu pregunta, cuando iteras sobre la variable events, dentro de carousel-indicators parece que events está vacío y dentro de carousel-inner sí que hay elementos dentro de events. ¿Estoy entendiendo bien la pregunta? Si es así te aconsejo que cambies el título para que se entienda un poco mejor. Por otro lado, ¿Qué plugin de jQuery estás usando para el carousel? el 27 nov. 2018 a las 11:38
  • 3
    Hola!!! estuve muy ciega en esta app, solo me hacia falta iterar el Item para que se activara la class active en el primer slide. el 29 nov. 2018 a las 17:50
  • 2
    gracias por la ayuda y en las próximas preguntas trataré de redactarlo mejor. el 29 nov. 2018 a las 17:50
  • Deberías agregar la respuesta a tu pregunta no crees?
    – Ceragos
    el 22 oct. 2019 a las 3:50

1 respuesta 1

1

Lo que me hizo falta hacer era iterar entre los objetos que queria que se visualizaran:

{% for event in events %}
     {% include 'slider.html'%}
{% endfor %}

Este es el contenido de slider.html

<div class="carousel-item item opacity_img {%if forloop.counter0 == 0%}active{%endif%}">
<div class="carousel-caption header-opacity slider_img">
    <h3 class="header-tag font-weight-bold"><span style="background-color:#F9C00C; color:#fff;">&nbsp;{{ event.tag }}&nbsp;</span></h3>            
    <h1 class="header-title font-weight-bold" style="color:#fff;">{{event.title}}</h1>
    <h2 class="header-description" style="color:#fff;">{{event.description}}</h2>
    <a class="header-button" href="{{event.view_more}}" target="_blank">
        <button type="button" class="btn btn-outline-light btn-lg mb-5 rounded-0">
            &nbsp; &nbsp; Ver más &nbsp; &nbsp;
        </button>
    </a>
</div>
<div class="slider_img" style="background-image: url('{{event.image.url}}');"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.