Hi Developers,
Lets see how to create the Dynamic Carousel Slider which will be very helpful in creating the dynamic website where they want to update their banner images according to the offers .
In Laravel the Dynamic Carousel Slider in achieved by storing the image in the public root folder and the image location along with the name in the database . And then when the page is loaded the image data in the database is also fetched and passing the value in the image tag src section to load and display image from the public root folder.
Lets start fresh laravel project image_slider by using the command
laravel new image_sliderLets create sliders table by using the following command:
php artisan make:migration create_sliders_table
then we create the necessary columns in table
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('sliders', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->string('url');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('sliders');
}
};Lets first create the migrations first using the command,
php artisan migrate
then lets create model using the command
php artisan make:model Slider
app/Models/Slider.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Slider extends Model
{
use HasFactory;
/**
* Write code on Method
*
* @return response()
*/
protected $fillable = [
'title', 'url'
];
}Lets create the seeder by using the command ,
php artisan make:seeder SliderSeeder
database\seeders\SliderSeeder.php
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\Slider;
class SliderSeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run(): void
{
$sliders = [
[
'title' => 'Image 1',
'url' => 'https://images.unsplash.com/photo-1690828030019-8a52be5f1ada?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDEzfGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=400&q=60'
],
[
'title' => 'Image 2',
'url' => 'https://images.unsplash.com/photo-1633976067869-1eb482034701?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDIwfGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=400&q=60'
],
[
'title' => 'Image 3',
'url' => 'https://images.unsplash.com/photo-1690743300187-51d68146adf7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHx0b3BpYy1mZWVkfDMwfGJvOGpRS1RhRTBZfHxlbnwwfHx8fHw%3D&auto=format&fit=crop&w=400&q=60'
]
];
foreach ($sliders as $key => $value) {
Slider::create($value);
}
}
}Lets run the SliderSeeder using the command
php artisan db:seed --class=SliderSeederLets declare the necessary routes in
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SliderController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('sliders', [SliderController::class, 'index']);Lets Create the controller using the command
php artisan make:controller SliderController
app/Http/Controllers/SliderController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Slider;
class SliderController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index()
{
$sliders = Slider::get();
return view('sliders', compact('sliders'));
}
}Lets create the blade file for the view , we are using Bootstrap image Carousel
resources/views/sliders.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carousel Slider in Laravel - ITSolutionsGuides</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h1>Carousel Slider in Laravel - ITSolutionsGuides</h1>
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
@foreach($sliders as $key => $slider)
<div class="carousel-item {{$key == 0 ? 'active' : ''}}">
<img src="{{ $slider->url }}" class="d-block w-100" alt="{{ $slider->title }}">
</div>
@endforeach
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</body>
</html>Lets run the application using the following command
php artisan serveWe hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides