0

Al crear un carrousel con Bootstrap, se muestra la primera imagen, pero no las siguiente. No estoy seguro si puede ser algo de de la clase "active". Parece que en bootstrap a la primera de las imágenes hay que indicarle clase active y el resto no. Pero al querer mostrar todos las imágenes mediante FOR de Django, todas tienen "active".

¿Dónde está el error?

Archivo template.html

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
      
      {% for img in station.image_station.all %}
      <div class="carousel-item active">
        <img class="d-block w-100" src="{{ img.image_imageStation.url }}" alt="">
      </div>  
      {% endfor %}
      
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
4
  • me parece que solo un elemento a la vez debe tener la clase active, prueba sin el for poniendo 3 imagenes directamente y ponle a las tres como active a ver si funciona.
    – soyunewok
    Commented el 18 ago. 2020 a las 16:06
  • Con un active: funciona ; Con todos active : no funciona ; Con ningún active no funciona. El problema es que necesito usar for ya que a veces hay una imagen, otras veces varias o ninguna. Funciona de forma dinámica desde la base de datos.
    – ret
    Commented el 18 ago. 2020 a las 16:10
  • pues entonces efectivamente es el active, te recomiendo leer esto uniwebsidad.com/libros/django-1-0/capitulo-4/… especificamente la sección 4.3.1.2, el ciclo for tiene una propiedad para saber si se hizo la primera iteración y según eso añades la clase.
    – soyunewok
    Commented el 18 ago. 2020 a las 16:17
  • Así es, en un grupo de facebook me han indicado eso de forloop. Gracias.
    – ret
    Commented el 18 ago. 2020 a las 16:44

1 respuesta 1

0

Forloop permite saber si es el primer loop o no. Por eso se puede mostrar la clase active solo en el primer for:

  {% for img in station.image_station.all %}
  <div class="carousel-item
    {% if forloop.first %}
      active
    {% endif %}
  ">
    <img class="d-block w-100" src="{{ img.image_imageStation.url }}" alt="">
  </div>  
  {% endfor %}

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.