Gallery & Media
Carousel, lightbox, zoom, before/after comparison and marquee.
How to create modern galleries and sliders? These 36 carousel components cover all needs: responsive slider, infinite carousel, masonry grid, lightbox, marquee and galleries with thumbnails. Each carousel is touch-friendly, accessible and optimized for performance.
Basic Slider
Simple horizontal slider with navigation arrows.
Fade Slider
Fade transition between slides.
Auto-play Slider
Auto-scrolling with progress bar.
Thumbnail Slider
Thumbnail navigation below the main slider.
Card Carousel
Multiple visible cards, horizontal scrolling.
3D Carousel
3D perspective rotation with depth.
Vertical Slider
Defilement vertical haut/bas.
Parallax Slider
Parallax effect on slide backgrounds.
Infinite Loop
Infinite scrolling with no visible end.
Basic Lightbox
Click on an image to open it in a modal with fade effect.
Zoom Lightbox
The image enlarges from its thumbnail position.
Gallery Grid
Masonry-style grid that opens a lightbox.
Lightbox with Thumbnails
Thumbnail strip at the bottom of the lightbox.
Fullscreen Lightbox
True fullscreen mode, Escape to close.
Lightbox with Caption
Animated caption that appears below the image.
Swipe Gallery
Touch gallery with swipe gesture.
Hover Zoom
The image zooms in on hover within its container.
Magnifying Glass
Circular magnifier that follows the cursor.
Lens Zoom
Square magnifier that enlarges the area under the cursor.
Pan Zoom
Move mouse to explore the zoomed image.
Click to Zoom
Click to alternate between normal and zoomed view.
Zoom with Overlay
Zoomed view in a separate panel.
Product Zoom
E-commerce style with thumbnails and hover.
Smooth Ken Burns
Slow zoom animation with continuous panning.
Basic Marquee
Defilement horizontal simple et fluide.
Reverse Marquee
Text scrolling in the opposite direction.
Vertical Marquee
Vertical scrolling for announcements.
Image Marquee
Images defilantes horizontalement.
Speed Variation
Differentes vitesses de defilement.
Hover Pause
Pauses on mouse hover.
Gradient Fade
Gradient fade on edges.
Alternating Rows
Rows alternating directions.
Logo Ticker
Bandeau de logos de partenaires.
Marquee with Icons
Text mixed with icons and symbols.
CSS-Only Carousel
Native carousel without a single line of JavaScript: arrows and dots generated by the browser (::scroll-button / ::scroll-marker), smooth scroll-snap. Lightweight, accessible, robust.
💡 Perfect for: product gallery, testimonials, partner logos, onboarding, hero slider — anywhere you used to write 30 lines of JS.
WebGL Displacement Slideshow
Slideshow whose transitions are computed by a GPU displacement shader: visuals warp and blend into each other. CSS crossfade fallback if WebGL is unavailable.
💡 Perfect for: visual hero, premium product gallery, agency showreel, photo portfolio, immersive homepage.