DEV Community

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

Posted on • Originally published at larainfo.com

3

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more