Background Slider
Forget static hero images. Capture attention and tell a story with a moving, breathing background. The Background Slider extension lets you transform any container into a stunning, automated slideshow. Upload your images, choose from 26 professional transitions and 11 Ken Burns animations to create smooth zooms and pans. Add elegant overlays for text readability, set the perfect timing, and watch your key message glide over a gallery of visuals. Perfect for portfolios, product showcases, travel sites, or any page that needs to make a powerful first impression.
Cinematic Transitions & Animations
Avoid boring, jarring cuts between slides. Select smooth transitions like Fade, Slide, Zoom, or creative ones like Flip and Cube. Then, bring each image to life with a Ken Burns effect – a subtle, slow zoom or pan (like “Up Right” or “Zoom In”) that adds a film-like depth and keeps the viewer’s eye engaged as the story unfolds.
- Smooth Transitions: Pick from 26+ effects (Fade, Slide, Curtain, etc.) for seamless image changes.
- Ken Burns Magic: Apply 11 different directional pan-and-zoom animations to make static photos feel alive.
- Random Display: Shuffle the slide order for a fresh experience on every page load.
Built-in Overlays for Perfect Readability
A common problem with background sliders is text becoming hard to read over busy images. We solve that with 9 pre-designed overlay styles (like dark gradient, light mesh, or color tints). Don’t like them? Create a Custom Overlay using a solid color, a gradient, or even a semi-transparent image to dim the background just enough, making your headlines and buttons crystal clear.
- One-Click Overlays: Apply instant stylish overlays (None, Dark Gradient, Light, Dots, etc.) for contrast.
- Full Custom Overlay: Use the color picker or gradient tool to create a perfect tint that matches your brand.
- Control Opacity: Fine-tune the overlay intensity to balance background beauty and text clarity.
Full Control Over Timing & Display
You control the entire experience. Set the Delay (in milliseconds) between slides – 5000ms for a calm pace, 3000ms for more energy. Choose if images should Cover the area perfectly without stretching. Enable the Timer progress bar to show viewers how long until the next slide, or hide it for a cleaner look.
- Set Your Rhythm: Adjust the Delay slider to control how long each image displays.
- Perfect Fit: Ensure images Cover the area without distortion, cropping them intelligently.
- Optimize Performance: Select Image Resolution (Full, Large, Medium) to balance visual quality with page load speed.
Frequently Asked Questions For Background Slider
How is this different from a regular Image Carousel widget?
A carousel is a content element you put inside a section. This Background Slider is a background for the section/container itself. Your text, buttons, and other widgets sit on top of the sliding images. It’s for creating immersive hero areas, not for displaying a gallery of product thumbnails.
Can visitors pause or navigate the slider?
The extension focuses on automatic, background presentation. It typically doesn’t add visible pause/play buttons or navigation arrows by default, as that would clutter the hero area. The goal is a cinematic, auto-played experience. For user-controlled galleries, you’d use a dedicated Slider or Carousel widget.
Will using multiple high-resolution images slow down my page?
It can, if you’re not careful. Always optimize your images before uploading (compress them for the web). Use the Image Resolution setting to serve appropriately sized files. For example, use “Large” instead of “Full” if the container is only 1200px wide. This keeps the visual impact high and the speed fast.
Can I use this on a column, not just a full section?
Yes! You can apply the Background Slider to Sections, Containers, and Columns. This means you could have a static content column next to a column with a sliding background, creating dynamic and complex layouts with ease.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
