DEV Community

Cover image for How to Use Carousel Slider in Laravel 9 Example
saim
saim

Posted on • Originally published at larainfo.com

How to Use Carousel Slider in Laravel 9 Example

In this section we will see how to use carousel slider in laravel 9 with tailwind css. For this tutorial we will see static slider, dynamic slider with laravel 9.

Tools Use

Laravel 9

Laravel Breeze

Tailwind CSS

Swiper Slider

Example 1

Add laravel 9 Static Slider with Tailwind CSS
Create Laravel Project
Run below command in your terminal to create laravel project.

composer create-project --prefer-dist laravel/laravel laravel-slider
Enter fullscreen mode Exit fullscreen mode

Install laravel Breeze.
Laravel 9 Authentication with Laravel Breeze

Create Slider Controller
Run below command to create slider controller

php artisan make:controller SliderController
Enter fullscreen mode Exit fullscreen mode

app/Http/Controllers/SliderController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class SliderController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('sliders.index');
    }
}
Enter fullscreen mode Exit fullscreen mode

Create Slider Route
web.php

Route::get('sliders', [SliderController::class,'index'])->name('sliders');
Enter fullscreen mode Exit fullscreen mode

Add @stacks in main blade file
resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
        @stack('styles') 
        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])

    </head>

    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @include('layouts.navigation')

            <!-- Page Heading -->
            <header class="bg-white shadow">
                <div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
        @stack('scripts')
    </body>

</html>
Enter fullscreen mode Exit fullscreen mode

Add Swiper slider using @push in blade
views/sliders/index.blade.php

<x-app-layout>
    @push('styles')
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
    @endpush
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('Laravel 9 Slider') }}
        </h2>
    </x-slot>
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              class="object-cover w-full h-96"
              src="https://source.unsplash.com/user/erondu/3000x900"
              alt="image"
            />
          </div>
          <div class="swiper-slide">
            <img
              class="object-cover w-full h-96"
              src="https://source.unsplash.com/collection/190727/3000x900"
              alt="image"
            />
          </div>
          <div class="swiper-slide">
            <img
              class="object-cover w-full h-96"
              src="https://source.unsplash.com/collection/190728/3000x900"
              alt="image"
            />
          </div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
      @push('scripts')
    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
      var swiper = new Swiper(".mySwiper", {
        cssMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
        mousewheel: true,
        keyboard: true,
      });
    </script>
    @endpush
</x-app-layout>
Enter fullscreen mode Exit fullscreen mode

laravel 9 slider example

Run laravel and vite server

php artisan serve
// and
npm run dev
Enter fullscreen mode Exit fullscreen mode

Example 2

Add Dynamic slider in Laravel 9 with Tailwind CSS
Create Slider Model Controller and Routes.

php artisan make:model Slider -mcr
Enter fullscreen mode Exit fullscreen mode

create_sliders_table.php

public function up()
{
    Schema::create('sliders', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->string('image');
        $table->timestamps();
    });
}
Enter fullscreen mode Exit fullscreen mode

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;
    protected $fillable = [
        'name',
        'image'
    ];
}
Enter fullscreen mode Exit fullscreen mode

Store Dynamic image Slider
app/Http/Controllers/SliderController.php

<?php

namespace App\Http\Controllers;

use App\Models\Slider;
use Illuminate\Http\Request;

class SliderController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $sliders = Slider::all();

        return view('sliders.index', compact('sliders'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        return view('sliders.create');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string|max:255',
            'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048'
        ]);
        if ($request->hasFile('image')) {
            $image_path = $request->file('image')->store('image', 'public');
        }
        Slider::create([
            'name' => $request->name,
            'image' => $image_path
        ]);
        return redirect()->route('sliders.index');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Models\Slider  $slider
     * @return \Illuminate\Http\Response
     */
    public function show(Slider $slider)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Models\Slider  $slider
     * @return \Illuminate\Http\Response
     */
    public function edit(Slider $slider)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Models\Slider  $slider
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Slider $slider)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Models\Slider  $slider
     * @return \Illuminate\Http\Response
     */
    public function destroy(Slider $slider)
    {
        //
    }
}
Enter fullscreen mode Exit fullscreen mode

Create Dynamic slider
sliders/create.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('SLider Create') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <form method="POST" action="{{ route('sliders.store') }}" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-6">
                            <label class="block">
                                <span class="text-gray-700">Name</span>
                                <input type="text" name="name"
                                    class="block w-full @error('name') border-red-500 @enderror mt-1 rounded-md"
                                    placeholder="" value="{{old('name')}}" />
                            </label>
                            @error('title')
                            <div class="text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <label class="block">
                                <span class="text-gray-700">Image</span>
                                <input type="file" name="image"
                                    class="block w-full mt-1 rounded-md"
                                    placeholder="" />
                            </label>
                            @error('image')
                            <div class="text-sm text-red-600">{{ $message }}</div>
                            @enderror
                        </div>
                        <button type="submit"
                            class="text-white bg-blue-600  rounded text-sm px-5 py-2.5">Submit</button>

                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
Enter fullscreen mode Exit fullscreen mode

add dynamic slider in laravel 9

Add Dynamic slider in index file
sliders/index.blade.php

<x-app-layout>
    @push('styles')
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
    @endpush
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800">
            {{ __('Laravel 9 Slider') }}
        </h2>
    </x-slot>
    <div class="mt-6 mx-60 swiper mySwiper">
        <div class="swiper-wrapper">
          @foreach ($sliders as $slider)
          <div class="swiper-slide">
            <img
              class="object-cover w-full h-full"
              src="{{ asset('/storage/' . $slider->image) }}"
              alt="{{ $slider->title }}"
            />
          </div>
          @endforeach
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-pagination"></div>
      </div>
      @push('scripts')
    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
      var swiper = new Swiper(".mySwiper", {
        cssMode: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
        },
        mousewheel: true,
        keyboard: true,
      });
    </script>
    @endpush
</x-app-layout>
Enter fullscreen mode Exit fullscreen mode

Run the laravel and vite server

php artisan serve
// and
npm run dev
Enter fullscreen mode Exit fullscreen mode

Top comments (0)