Laravel 9 예제에서 회전 슬라이더를 사용하는 방법
30581 단어 tutorialtailwindcsslaravelwebdev
도구 사용
라라벨 9
라라벨 브리즈
테일윈드 CSS
스위퍼 슬라이더
예 1
Tailwind CSS로 laravel 9 정적 슬라이더 추가
라라벨 프로젝트 생성
laravel 프로젝트를 생성하려면 터미널에서 아래 명령을 실행하십시오.
composer create-project --prefer-dist laravel/laravel laravel-slider
라라벨 브리즈를 설치합니다.
Laravel 9 Authentication with Laravel Breeze
슬라이더 컨트롤러 만들기
아래 명령을 실행하여 슬라이더 컨트롤러를 만듭니다.
php artisan make:controller SliderController
앱/Http/컨트롤러/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');
}
}
슬라이더 경로 만들기
web.php
Route::get('sliders', [SliderController::class,'index'])->name('sliders');
기본 블레이드 파일에 @stacks 추가
리소스/뷰/레이아웃/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>
인 블레이드를 사용하여 Swiper 슬라이더 추가
뷰/슬라이더/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>
laravel 및 vite 서버 실행
php artisan serve
// and
npm run dev
예 2
Tailwind CSS를 사용하여 Laravel 9에 동적 슬라이더 추가
슬라이더 모델 컨트롤러 및 경로를 만듭니다.
php artisan make:model Slider -mcr
create_sliders_table.php
public function up()
{
Schema::create('sliders', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('image');
$table->timestamps();
});
}
앱/모델/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'
];
}
동적 이미지 슬라이더 저장
앱/Http/컨트롤러/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)
{
//
}
}
동적 슬라이더 만들기
슬라이더/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>
인덱스 파일에 동적 슬라이더 추가
슬라이더/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>
laravel 및 vite 서버 실행
php artisan serve
// and
npm run dev
Reference
이 문제에 관하여(Laravel 9 예제에서 회전 슬라이더를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larainfo/how-to-use-carousel-slider-in-laravel-9-example-10ge텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
