Gallery Slider
Tired of basic image grids or simple slideshows? The Gallery Slider element combines the best of both worlds. It features a sleek split layout: a large, beautiful Preview area paired with a navigational Thumbnail strip or grid. Click any thumbnail to instantly update the main preview. Perfect for portfolios, product galleries, or showcasing any image collection with a premium, interactive feel. With separate, deep customization for every single part – from thumbnail hovers to preview captions – you can build a gallery that’s not just functional, but a memorable part of your site’s experience.
Unique Split-Layout Design
This isn’t a standard carousel. It’s a dedicated gallery interface. Choose your Preview Position (Left or Right) and control its Width as a percentage of the total space. The thumbnails sit neatly alongside it. On smaller screens, use the “Stack on” feature to automatically stack the preview and thumbnails vertically, ensuring a perfect view on every device. This layout gives users clear, focused viewing with easy navigation.
- Flexible Layout Control: Set the preview to be the focal point on the left or right, with adjustable width (e.g., 70%).
- Thumbnail Navigation: Users can click through thumbnails to change the main preview – intuitive and fast.
- Mobile-Responsive Stacking: Automatically stacks the layout on tablet & mobile for optimal use of vertical space.
Design the Preview, Thumbnails
Achieve a perfectly cohesive design by styling each part independently. Style the Preview area’s background, borders, and shadow. Design the Preview Captions with full typography, padding, and alignment controls. Then, style the Thumbnails: control their Vertical/Horizontal Spacing, Borders, Border Radius, and alignment. Finally, create engaging interactions by designing separate Hover Effects for both preview and thumbnails, including scale, shadow, filters, and colored overlays.
- Complete Preview Styling: Add backgrounds, custom heights, and shadows to the main image area.
- Thumbnail Grid Control: Adjust spacing and borders to create a neat, organized thumbnail grid.
- Interactive Feedback: Set unique hover effects for thumbnails (scale, background color, overlay) and preview captions.
Smooth Animations & Transitions
Bring your gallery to life with smooth, professional motion. The main preview can feature a subtle Ken Burns pan-and-zoom effect. Choose the Direction (Across, Up, Down) and Position. Control the transition Speed between slides. Add elegant Caption Transitions that fade or slide in. Every interaction, from switching images to hovering on thumbnails, can have a customized Animation Speed and easing for a polished, premium feel.
- Ken Burns Effect: Add a slow, cinematic pan or zoom to the main preview image for added dynamism.
- Custom Transition Speed: Control how quickly the main image changes when a thumbnail is clicked.
- Refined Micro-Interactions: Smooth hover transitions on thumbnails and captions enhance the user experience.
Professional Gallery Controls & Navigation
Manage your gallery like a pro. Choose Image Resolution for optimal load times. Enable Autoplay for the slider or let users navigate manually. Add stylish Navigation Arrows over the preview and customize their size, color, and hover states. Every setting is designed to give you complete control over functionality and aesthetics.
- Autoplay & Looping: Set the gallery to cycle through images automatically with adjustable speed.
- Custom Navigation Arrows: Style the previous/next arrows to match your site’s design.
Frequently Asked Questions For Gallery Slider
What's the main advantage of this over a standard image carousel?
A standard carousel shows one image at a time with dots/arrows. This Gallery Slider provides a two-panel interface: a large preview and a visible set of all thumbnail options. This allows users to see their choices at a glance and jump directly to any image, which is much more efficient and user-friendly for galleries with more than a few images.
Can I make the thumbnails display in a grid instead of a single row?
Yes! The styling options for Thumbnails include controls for Horizontal and Vertical Spacing, which are key for creating a grid. By adjusting the container width and these spacing values, you can create a multi-row grid of thumbnails next to your preview.
Is the Ken Burns effect applied to all images?
When enabled, the Ken Burns effect (a slow pan/zoom) is applied to the main preview image. It creates a subtle, continuous animation on the currently active photo, adding a sense of life and depth to your gallery.
How does this perform with many high-resolution images?
For the best performance, use the Image Resolution setting wisely (e.g., “Large” instead of “Full” if the display size doesn’t require full resolution). The element is optimized, but loading 20+ full-size images will always impact page speed. Consider lazy loading or breaking very large galleries into multiple sliders.
Can I use this for a product image gallery in an online store?
Absolutely. It’s an excellent choice for product pages where you need to show multiple angles, colors, or details. Users can click the thumbnail of a different color variant to see it in the main preview instantly. Just link the main “Buy Now” button to your cart or product page.
What happens on mobile with the "Stack on" feature?
When Stack on is set to “Tablet & Mobile,” the horizontal side-by-side layout changes to a vertical stack. The large preview appears on top, and the thumbnails grid appears below it. This ensures the preview remains large and viewable, and the thumbnails are still easily tappable on a touchscreen.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
