Image Carousel
An image carousel should do more than just slide – it should engage. Master Addons Image Carousel element turns your galleries into interactive experiences. Go beyond basic sliders with fine-tuned controls for navigation, smooth animations, and deep styling for every single state. Create multi-column layouts, enable a gorgeous lightbox, and style the arrows, dots, and items exactly to match your brand. Whether it’s a portfolio, product shots, or client logos, this carousel gives you the tools to make it look professional and work perfectly.
Advanced Layout & Behavior Control
Take full control over how your carousel looks and behaves. Choose a Carousel or Coverflow layout. Set Slides per Column for grid-like displays and define how many Slides to Scroll. Enable features like Autoplay, Loop, Center Mode, and even a Grab Cursor for interactive dragging. The Observer option ensures it works perfectly inside tabs or accordions. This isn’t just a carousel; it’s a fully user hookable element.
- Flexible Layouts: Create multi-row grids or classic horizontal sliders with full control over columns and scroll.
- Smooth Interactions: Set Autoplay Speed, Animation Speed, and enable Pause on Hover for user-friendly behavior.
- Smart Adaptive Features: Use Auto Height to avoid awkward empty spaces, and Observer to make it work in hidden containers.
Style Every Part, in Every State
Make your carousel a perfect part of your design. Don’t just style the images – style the container for each item. Set unique backgrounds, borders, shadows, and padding for Normal, Hover, and Active states. Adjust the Item Gap and overall Opacity. This level of detail lets you create interactive cards, highlight the active slide, and provide clear visual feedback as users interact.
- Interactive Feedback: Design distinct hover effects (like a shadow lift or color change) to engage visitors.
- Active Slide Highlight: Make the current center slide stand out with a different border or background.
- Complete Visual Control: Customize Border Radius, Box Shadow, and Padding for perfect item framing.
Navigation & Integrated Lightbox
Guide your visitors properly on your image carousel. Design elegant Arrow navigation with custom icons, colors, backgrounds, and positioning (Inside, Outside). Hide them on mobile for a cleaner look. Then, enable your gallery with a built-in Lightbox. Customize the preview icon, overlay, and caption typography. Choose between Fancybox and Elementor to open images in a beautiful, full-screen viewing experience.
- Custom Navigation Arrows: Style arrows from scratch – change their color, size, background, and Horizontal Offset.
- Mobile-Optimized: Choose to Hide Arrow on Mobile and rely on swipe gestures for a native feel.
- Premium Lightbox: Offer a zoomed-in view with customizable icons and overlays, turning the carousel into a full gallery.
Frequently Asked Questions For Image Carousel
What's the main advantage over Elementor's basic Image Carousel?
While Elementor’s carousel is good for simple sliders, Master Addons offers much deeper control. Key advantages include: styling carousel items themselves (not just images), multi-column/row layouts, state-based styling (Normal/Hover/Active), more navigation positioning options, a built-in customizable lightbox, and the Observer feature for use in tabs/accordions.
If I enable 'Auto Height', will my images get stretched or cropped?
No. Auto Height adjusts the overall carousel container’s height to match the tallest slide currently visible. Your images will maintain their aspect ratio based on your other settings (like “Image Size”). It prevents fixed heights from creating large blank spaces if you have images of varying portrait/landscape orientations.
Can I use this for a logo slider with grayscale to color on hover?
Absolutely! This is a perfect use case. Upload your logo images. In the Carousel Items tab, set the normal state Opacity or use a CSS filter to make them grayscale. Then, in the Hover state, set the opacity back to 1 and remove the filter. The built-in hover styling makes this effect easy without custom code. Or you can use our Logo Slider element to create a perfect logo slider too.
How does the "Observer" setting work, and when should I use it?
The Observer watches for changes in the carousel’s container. Enable it (set to Yes) when you place the carousel inside a tab, accordion, or toggle widget, or anywhere it’s initially hidden. This ensures the carousel renders and functions correctly the moment a user clicks to reveal its parent container. If it’s broken inside a tab, this usually fixes it.
Will having multiple carousels with autoplay on one page cause performance issues?
It can, if you have many (like 15+). Each autoplaying carousel is a moving element the browser must animate. For best performance, limit autoplay to your most important hero carousel. For others, consider letting users scroll manually. Also, using optimized image sizes (through Image Resolution settings) is crucial for speed.
Can I link carousel items to different URLs instead of just the lightbox?
The primary function shown is for an image gallery with a lightbox. To link items to URLs, you should use the Logo Carousel element by Master Addons.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
