How to Add Dynamic Carousel Slider in Laravel?

Hi Dev,

Today, I will let you know example of how to make dynamic slider in laravel. I would like to show you laravel slider example. if you want to see an example of dynamic carousel laravel then you are in the right place. This tutorial will give you a simple example of how to use dynamic carousel slider in laravel. Alright, let us dive into the details.

I will show step by step how to add dynamic bootstrap carousel slider in laravel. we will create sliders table using migration command. Then we will create seeder to add some dummy records on sliders table. Next, we will create simple get route with controller method. After the last we will create blade file and use bootstrap carousel slider. so, it will take just 10 minute to make dynamic slider in laravel.

You can use this example with laravel 6, laravel 7, laravel 8, laravel 9, laravel 10 and laravel 11 version.

So, let's follow the below steps:

Step 1: Install Laravel

first of all we need to get fresh Laravel version application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Migration and Model

here, we will create new migration for adding new table sliders with title and url fields. so let's run bellow command:

php artisan make:migration create_sliders_table

After this command you will find one file in following path "database/migrations" and you have to put bellow code in your migration file for create sliders 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');
    }
};

Now you have to run this migration by following command:

php artisan migrate

Next, After create "sliders" table you should create Slider model for sliders table, so first create file in this path app/Models/Slider.php and put bellow content in Slider.php file:

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

Step 3: Create Seeder Class

This step, we will create new seeder call SliderSeeder and store dummy records to it:

php artisan make:seeder SliderSeeder

Further, put the below code in database\seeders\SliderSeeder.php:

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://picsum.photos/seed/picsum/700/400'
            ],
            [
                'title' => 'Image 2',
                'url' => 'https://picsum.photos/id/237/700/400'
            ],
            [
                'title' => 'Image 3',
                'url' => 'https://picsum.photos/id/200/700/400'
            ]
        ];
 
        foreach ($sliders as $key => $value) {
            Slider::create($value);
        }
    }
}

Now, we will run seeder commands:

php artisan db:seed --class=SliderSeeder

Step 4: Create Route

In this is step we need to create routes for display bootstrap carousel slider. so open your "routes/web.php" file and add following route.

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

Step 5: Create Controller

Here,we require to create new controller SliderController with index method to display slider. So let's put bellow code.

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

Step 6: Create View File

In Last step, let's create sliders.blade.php and data.blade.php for display slider and put following code:

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 - ItSolutionStuff.com</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 - ItSolutionStuff.com</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>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/sliders

Output:

I hope it can help you...