How to Add Dynamic Carousel Slider in Laravel 10?

Hello Dev,

Today, how to add a dynamic carousel slider in Laravel 10? is our main topic. We will use how to make a dynamic slider in laravel10. if you have a question about dynamic carousel in Laravel 10 then I will give a simple example with a solution. this example will help you with how to add the carousel effect.

I'll guide you through the step-by-step process of adding a dynamic Bootstrap carousel slider in Laravel. First, we'll create a slider table using the migration command. Then, we'll set up a seeder to populate the slider table with some dummy records. Following that, we'll create a simple route using a controller method. Finally, we'll craft a Blade file and implement the Bootstrap carousel slider. This entire process will take just 10 minutes to create a dynamic slider in Laravel.

This example is compatible with Laravel versions 6, 7, 8, 9, and 10. Whether you're using Laravel 6, Laravel 7, Laravel 8, Laravel 9, or Laravel 10, you can follow these steps to implement a dynamic Bootstrap carousel slider.

So, let's follow the below steps.

Step 1: Install Laravel

First of all, we need to create a fresh Laravel application using the command below. Open your terminal or command prompt and run the command.

composer create-project laravel/laravel blog

Step 2: Create Migration and Model

Here, we will create a new migration for adding new table sliders with title and URL fields. so let's run the bellow command.

php artisan make:migration create_sliders_table

After running this command, you will find a file in the following path: database/migrations. In this migration file, insert the following code to create the 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 the command.

php artisan migrate

Next, After creating the "sliders" table you should create a Slider model for the sliders table, so first create the 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 the seeder command.

php artisan db:seed --class=SliderSeeder

Step 4: Create Route

In this step, we need to create routes to display the Bootstrap carousel slider. Open your routes/web.php file and add the 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 need to create a new controller, SliderController, with an index method to display the slider. Let's add the following 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 the last step, let's create sliders.blade.php and data.blade.php to display the slider, and insert the 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 - Nicesnippets.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 - Nicesnippets.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...