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.

Lección 17 del Curso Flutter y Laravel Tienda Delivery

Carrusel de imágenes dinámico
Carrusel de imágenes dinámico

¿Cómo crear un carrusel de imágenes dinámicas en Laravel?

DESCRIPCIÓN DE LA LECCIÓN

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>

...


POR LA COMPRA DEL CURSO COMPLETO

  • MIRA TODOS LOS VIDEOS SIN RESTRICCIÓN
  • TEN ACCESO AL CURSO DE POR VIDA
  • DESCARGA TODO CÓDIGO FUENTE DEL PROYECTO
  • ACCESO A CURSOS Y RECURSOS GRATIS

Flutter y Laravel Tienda Delivery

551 visitas

Lecciones del curso

VER MÁS CURSOS
Logo Codea App

Develop your code

Perú, México, Colombia, España, Venezuela, Argentina, Bolivia

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021