Inicio » Cursos » Flutter y Laravel Tienda Delivery

Curso Flutter y Laravel Tienda Delivery

Capitulo 17 ➜ Carrusel de imágenes dinámico

Carrusel de imágenes dinámico

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

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>

Y en el controlador:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Portadas;
class FrontController extends Controller
{
    public function index(){
        $portadas = Portadas::all();       
        return view('welcome',compact('portadas'));
    }
}

 


3768 visitas

Sigue con el curso: Capítulo 18 – Productos en la Portada

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

Más cursos que pueden interesarte

Más cursos

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023