Curso Flutter y Laravel Tienda Delivery
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'));
}
}
3599 visitas
Descarga el código fuente del proyecto adquiriendo el curso completo
Descargar ahora© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023