Galerie Interactive

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

Carousel Image gallery Range Slider

Author Omer fils ELENGA

Tailwind v3.4 471 2

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

3D Animated Image Gallery
3D Animated Image Gallery

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

9.9k
responsive slider carousel
slider carousel

Abhiraj

1 year ago

3.1k
Slider
Responsive slider

Abhiraj

1 year ago

3k
slider /carousel
simple slider or carousel

Omer fils ELENGA

1 year ago

1.7k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2k
Avant & Après
Avant & Après

Omer fils ELENGA

9 months ago

890
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive
Linear dinamique section by Raul antonio de la cruz hernandez remix omerlinx responsive

Omer fils ELENGA

8 months ago

806
tinderclone By omerlinks
tinderclone By omerlinks

Omer fils ELENGA

8 months ago

629
omerlinkStream
omerlinkStream

Omer fils ELENGA

8 months ago

1.2k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

931
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

592
PlayStore Style Carousel
PlayStore Style Carousel

Omer fils ELENGA

7 months ago

400