Capítulo 17 – Carrusel de imágenes dinámico – Curso Flutter y Laravel Tienda Delivery

Curso Flutter y Laravel Tienda Delivery

Capitulo 17 ➜ 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.

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

3821 visitas

« Capítulo 16 – Menú de navegación dinámico

Capítulo 18 – Productos en la Portada »

{ Curso Flutter y Laravel Tienda Delivery }

Compartir link con tus amigos

Descarga el código del proyecto

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

Comprar

Indice

Planteamiento y herramientas

1 Introducción 2 Planteamiento 3 Herramientas y programas 4 Base de datos

BackEnd Administración

5 Instalación de Laravel 6 Módulo Usuarios 7 Módulo Categorías 8 Módulo Subcategorías 9 Módulo Productos 10 Módulo Pedidos 11 Módulo Detalle 12 Carrusel de imágenes 13 Blog para SEO 14 Roles de usuario

FrontEnd página web

15 Diseño de la portada 16 Menú de navegación dinámico 17 Carrusel de imágenes dinámico 18 Productos en la Portada 19 Arquitectura de urls en Laravel 20 Mostrar categorías y subcategorías 21 Mostrar Producto 22 Blog en Laravel 23 Integrar el Carrito de Compra 24 Procesar el Pedido 25 Historial del Pedido

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

30 Planteamiento de la app en Flutter 31 Creación del Proyecto Flutter 32 Estructura de Archivos 33 Implementación del Servicio Web (API) 34 Modelos Categoria, Subcategoria y Producto 35 Creación de la Base de Datos Sqflite 36 Métodos para gestionar la DB DbHelper 37 Modelo Carrito 38 Métodos para la gestión del Carrito 39 Implementación de la Pantalla Inicio 40 Implementación de la Pantalla Login 41 Implementación de la Pantalla Registro 42 Uso de la API para sincronizar la BD 43 Implementación Pantalla Categoria con Sqflite 44 Implementación de la pantalla Productos 45 Implementación Pantalla Producto 46 Logout de la App Delivery 47 Integrar ChangeNotifierProvider 48 Integrar Notificaciones en la AppBar 49 Botón Agregar al Carrito 50 Resumen Carrito de Compra 51 Envío del Pedido Delivery 52 Confirmación del Pedido Delivery

Bonus

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