Home
Omer fils ELENGA
Galerie Interactive

Galerie Interactive

This tailwind example is contributed by Omer fils ELENGA, on 23-Jan-2026. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Masonry, Image grid

Carousel Image gallery Range Slider

Author Omer fils ELENGA

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slider Avancé - Grand & Petit Format</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        'slide-in': 'slideIn 0.5s ease-out',
                        'slide-out': 'slideOut 0.5s ease-out',
                        'fade-in': 'fadeIn 0.8s ease-out',
                        'zoom-in': 'zoomIn 0.4s ease-out',
                    },
                    keyframes: {
                        slideIn: {
                            '0%': { transform: 'translateX(30px)', opacity: '0' },
                            '100%': { transform: 'translateX(0)', opacity: '1' },
                        },
                        slideOut: {
                            '0%': { transform: 'translateX(0)', opacity: '1' },
                            '100%': { transform: 'translateX(-30px)', opacity: '0' },
                        },
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        zoomIn: {
                            '0%': { transform: 'scale(0.95)', opacity: '0' },
                            '100%': { transform: 'scale(1)', opacity: '1' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .blur-card {
            filter: blur(3px);
            transition: all 0.4s ease;
        }
        .blur-card:hover {
            filter: blur(0);
            transform: scale(1.05);
        }
        .active-card {
            filter: blur(0);
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-800 min-h-screen flex items-center justify-center p-4">
    <div 
        x-data="{
            currentIndex: 0,
            autoSlide: true,
            interval: null,
            images: [
                {
                    id: 1,
                    url: 'https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722165/AbhirajK/Abhirajk.webp',
                    title: 'Abhiraj K',
                    description: 'Design moderne avec des tons neutres'
                },
                {
                    id: 2,
                    url: 'https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722163/AbhirajK/Abhirajk%20mykare.webp',
                    title: 'Mykare Health',
                    description: 'Interface médicale intuitive'
                },
                {
                    id: 3,
                    url: 'https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722161/AbhirajK/Abhirajk2.webp',
                    title: 'Abhiraj K 2',
                    description: 'Design épuré et fonctionnel'
                },
                {
                    id: 4,
                    url: 'https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722161/AbhirajK/Abhirajk3.webp',
                    title: 'Abhiraj K 3',
                    description: 'Expérience utilisateur optimisée'
                },
                {
                    id: 5,
                    url: 'https://res.cloudinary.com/djv4xa6wu/image/upload/v1735722160/AbhirajK/Abhirajk4.webp',
                    title: 'Abhiraj K 4',
                    description: 'Design responsive et adaptable'
                }
            ],
            
            init() {
                if (this.autoSlide) {
                    this.startAutoSlide();
                }
                
                // Observer pour animations au scroll
                this.$nextTick(() => {
                    const observer = new IntersectionObserver((entries) => {
                        entries.forEach(entry => {
                            if (entry.isIntersecting) {
                                entry.target.classList.add('animate-fade-in');
                            }
                        });
                    }, { threshold: 0.1 });
                    
                    document.querySelectorAll('.slide-item').forEach(el => observer.observe(el));
                });
            },
            
            startAutoSlide() {
                this.interval = setInterval(() => {
                    this.nextSlide();
                }, 4000);
            },
            
            stopAutoSlide() {
                if (this.interval) {
                    clearInterval(this.interval);
                    this.interval = null;
                }
            },
            
            nextSlide() {
                this.currentIndex = (this.currentIndex + 1) % this.images.length;
            },
            
            prevSlide() {
                this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
            },
            
            goToSlide(index) {
                this.currentIndex = index;
            },
            
            toggleAutoSlide() {
                this.autoSlide = !this.autoSlide;
                if (this.autoSlide) {
                    this.startAutoSlide();
                } else {
                    this.stopAutoSlide();
                }
            }
        }"
        class="w-full max-w-6xl mx-auto"
    >
        
        <div class="text-center mb-10 slide-item">
            <h1 class="text-4xl md:text-5xl font-bold text-white mb-4 animate-fade-in">
                Galerie Interactive
            </h1>
            <p class="text-gray-300 text-lg">
                Grande carte principale avec prévisualisations floues
            </p>
        </div>

<div class="flex justify-between items-center mb-6 slide-item">
            <div class="flex items-center space-x-4">
                <button 
                    @click="toggleAutoSlide"
                    :class="autoSlide ? 'bg-green-600 hover:bg-green-700' : 'bg-gray-700 hover:bg-gray-600'"
                    class="text-white px-4 py-2 rounded-lg transition-all duration-300 flex items-center space-x-2"
                >
                    <span x-text="autoSlide ? '❚❚ Pause' : '▶ Lecture'"></span>
                </button>
                
                <div class="text-white text-sm bg-gray-800 px-3 py-1 rounded-full">
                    <span x-text="currentIndex + 1"></span> / <span x-text="images.length"></span>
                </div>
            </div>
            
            <div class="flex space-x-2">
                <button 
                    @click="prevSlide"
                    @mouseenter="stopAutoSlide()"
                    @mouseleave="if(autoSlide) startAutoSlide()"
                    class="bg-gray-800 hover:bg-gray-700 text-white p-3 rounded-full transition-all duration-300 hover:scale-110"
                >
                    ←
                </button>
                <button 
                    @click="nextSlide"
                    @mouseenter="stopAutoSlide()"
                    @mouseleave="if(autoSlide) startAutoSlide()"
                    class="bg-gray-800 hover:bg-gray-700 text-white p-3 rounded-full transition-all duration-300 hover:scale-110"
                >
                    →
                </button>
            </div>
        </div>

<div 
            x-transition:enter="animate-zoom-in"
            x-transition:leave="animate-fade-in"
            class="mb-10 slide-item"
        >
            <div class="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl overflow-hidden shadow-2xl border border-gray-700">
                <div class="relative h-[500px] md:h-[600px] overflow-hidden">
                    <template x-for="(image, index) in images" :key="image.id">
                        <img 
                            x-show="currentIndex === index"
                            x-transition:enter="transition ease-out duration-500"
                            x-transition:enter-start="opacity-0 scale-105"
                            x-transition:enter-end="opacity-100 scale-100"
                            x-transition:leave="transition ease-in duration-300"
                            x-transition:leave-start="opacity-100 scale-100"
                            x-transition:leave-end="opacity-0 scale-95"
                            :src="image.url" 
                            :alt="image.title"
                            class="absolute inset-0 w-full h-full object-cover"
                        >
                    </template>
                    
                    
                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6 md:p-8">
                        <h2 x-text="images[currentIndex].title" class="text-2xl md:text-3xl font-bold text-white mb-2"></h2>
                        <p x-text="images[currentIndex].description" class="text-gray-200 text-lg"></p>
                    </div>
                    
                    
                    <div class="absolute top-4 right-4 flex space-x-2">
                        <template x-for="(_, index) in images" :key="index">
                            <button 
                                @click="goToSlide(index)"
                                :class="currentIndex === index ? 'bg-white w-8' : 'bg-white/50 w-3 hover:bg-white/80'"
                                class="h-3 rounded-full transition-all duration-300"
                                :aria-label="'Aller à la slide ' + (index + 1)"
                            ></button>
                        </template>
                    </div>
                </div>
            </div>
        </div>

<div class="slide-item">
            <h3 class="text-xl font-semibold text-white mb-4">Prévisualisations</h3>
            
            <div class="flex overflow-x-auto no-scrollbar pb-4 space-x-4">
                <template x-for="(image, index) in images" :key="image.id">
                    <div 
                        @click="goToSlide(index)"
                        :class="currentIndex === index ? 'active-card ring-2 ring-blue-500' : 'blur-card opacity-80 hover:opacity-100'"
                        class="flex-shrink-0 w-40 md:w-48 lg:w-56 cursor-pointer rounded-xl overflow-hidden bg-gray-800 transition-all duration-300 transform hover:-translate-y-2"
                        @mouseenter="stopAutoSlide()"
                        @mouseleave="if(autoSlide) startAutoSlide()"
                    >
                        <div class="relative h-32 md:h-40">
                            <img 
                                :src="image.url" 
                                :alt="image.title"
                                class="w-full h-full object-cover"
                            >
                            <div class="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
                            
                            
                            <div 
                                x-show="currentIndex === index"
                                class="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center"
                            >
                                <svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                                </svg>
                            </div>
                        </div>
                        
                        <div class="p-3">
                            <h4 x-text="image.title" class="font-medium text-white truncate"></h4>
                            <p class="text-xs text-gray-400 truncate" x-text="image.description"></p>
                        </div>
                    </div>
                </template>
            </div>
        </div>

<div class="flex justify-center mt-8 space-x-3 slide-item">
            <template x-for="(_, index) in images" :key="index">
                <button 
                    @click="goToSlide(index)"
                    :class="currentIndex === index ? 'bg-blue-500 w-10' : 'bg-gray-700 hover:bg-gray-600 w-3'"
                    class="h-3 rounded-full transition-all duration-300"
                    :aria-label="'Aller à la slide ' + (index + 1)"
                ></button>
            </template>
        </div>

<div class="mt-10 text-center text-gray-400 text-sm slide-item">
            <p>Cliquez sur les miniatures pour naviguer • Survolez pour arrêter le défilement automatique</p>
        </div>
    </div>
</body>
</html>

Related Examples