Curso Tienda Delivery Flutter y Laravel

Lección 17: Carrusel de imágenes dinámico

Para crear un carrusel dinámico debemos integrar el componente carousel de Bootstrap, luego inflar con datos desde la base de datos.

Para crear un carrusel dinámico debemos integrar el componente carousel de Bootstrap, luego inflar con datos desde la base de datos.

El código a implementar es el siguiente:

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    @forelse ($portadas as $r)
      <div class="carousel-item @if ($loop->index==0) active @endif">
        <img src="/img/portadas/{{$r->urlfoto}}" class="d-block w-100" alt="{{$r->frase}}">
      </div>
    @empty
    @endforelse
  </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>

...


Contenido premium

Accede a todos los recursos y videos, explicación, scripts y código fuente con la suscripción premium

SUSCRÍBETE

Carrusel de imágenes dinámico

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020