Inicio » Cursos » Flutter y Laravel Tienda Delivery

Planteamiento y herramientas

BackEnd Administración

FrontEnd página web

Servicios web API Rest

  • 26.Integrar Json Web Tokens
  • 27.Autenticación con JWT
  • 28.Enviar Productos en JSON
  • 29.Recibir pedidos en Laravel

Desarrollo del aplicativo

Bonus

  • 53.SEO Onpage en Laravel
  • 54.Maquetación FrontEnd
  • 55.Diseño en Flutter

Curso Flutter y Laravel Tienda Delivery

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.

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.

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'));
    }
}

 


3571 visitas

Descarga el código del proyecto

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

Descargar ahora

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