slider swiper del projecte laravel12.test

pagines

funcio al controlador (C:\projectes\LARAVEL\laravel12\app\Http\Controllers\PostController.php):

public function swiper()
{
    // Obtenir els posts de la categoria "people" (ID: 7) i amb l'etiqueta "models_people" (ID: 22)
    $posts = Post::where('category_id', 7)
        ->whereIn('id', function ($query) {
            $query->select('post_id')
                  ->from('post_etiquetas')
                  ->where('etiqueta_id', 22);
        })
        ->whereNotNull('img') // Només posts amb imatge
        ->get();

    return view('posts.swiper', compact('posts'));
}

route a (C:\projectes\LARAVEL\laravel12\routes\web.php): 

Route::get('/swiper', [PostController::class, 'swiper'])->name('posts.swiper');

view (C:\projectes\LARAVEL\laravel12\resources\views\posts\swiper.blade.php):

@extends('layouts.prova')
@section('ruta', '/swiper')
@section('title', 'slider swiper')
@section('descripcio', 'slider swiper')
@section('content')


<div class="max-w-4xl mx-auto py-8">
    <h1 class="text-3xl font-bold text-center mb-6">Models People</h1>

    <!-- Swiper Container -->
    <div class="swiper-container h-screen">
    <div class="swiper-wrapper">
        @foreach ($posts as $post)
            <div class="swiper-slide flex items-center justify-center">
                <a href="{{ route('post.show', $post->id) }}">
                    <img src="{{ asset('storage/' . $post->img) }}" alt="{{ $post->title }}"
                         class="w-full h-[60vh] sm:h-[70vh] md:h-[80vh] lg:h-screen object-cover rounded-lg shadow-md">
                </a>
            </div>
        @endforeach
    </div>

    <!-- Botons de navegació -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>

    <!-- Paginació -->
    <div class="swiper-pagination"></div>
</div>



</div>

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        new Swiper('.swiper-container', {
            loop: true,
            autoplay: {
                delay: 3000,
                disableOnInteraction: false,
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
    });
</script>


<div class="flex justify-center items-center h-screen bg-gray-100">
    <div class="swiper mySwiper w-[400px] h-[500px]">
        <div class="swiper-wrapper">
            <div class="swiper-slide flex items-center justify-center bg-white shadow-lg rounded-lg">
                <h2 class="text-xl font-bold">Pàgina 1</h2>
            </div>
            <div class="swiper-slide flex items-center justify-center bg-white shadow-lg rounded-lg">
                <h2 class="text-xl font-bold">Pàgina 2</h2>
            </div>
            <div class="swiper-slide flex items-center justify-center bg-white shadow-lg rounded-lg">
                <h2 class="text-xl font-bold">Pàgina 3</h2>
            </div>
            <div class="swiper-slide flex items-center justify-center bg-white shadow-lg rounded-lg">
                <h2 class="text-xl font-bold">Pàgina 4</h2>
            </div>
        </div>

        <!-- Botons de navegació -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        new Swiper('.mySwiper', {
            effect: "flip",
            grabCursor: true,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    });
</script>

@endsection