A background image that changes with every slide turns a horizontal scroll into something closer to a slideshow, without putting an image inside each section.
Background Transition in the Horizontal Scroll widget from The Plus Addons for Elementor takes an image per slide, with an optional blur and colour overlay.
To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Horizontal Scroll is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.
- Widget to enable: Horizontal Scroll, switched on under The Plus Addons > Widgets.
- You need a template: an Elementor Library template whose top-level sections are the slides. The widget turns each top-level section of that template into one horizontal slide.
- Leave the template sections transparent: the background image is drawn behind your template, so a section with its own background hides it.
How to Change the Background Image on Scroll
- Select the Horizontal Scroll widget and open Scrolling Options.
- Switch Background Transition on. The Background repeater appears with two rows.
- Open Item #1 and pick a file in Choose Image. That image becomes the background for the first slide.
- Open the Backdrop Filter popover if you want to soften the image: Background Blur blurs it and Background Overlay lays a colour over it, which is what keeps light text readable.
- Repeat for each row, and use + ADD ITEM until there is one row per slide.
The Result
Slide 2 in view, on the image and overlay set for the second row:
Settings in a Row
| Setting | What it does | Default |
|---|---|---|
| Title | Just the row label in the panel. | Item #1, Item #2 |
| Color | A flat colour instead of an image. | Empty |
| Choose Image | The background image for this slide. | Empty |
| Backdrop Filter | Opens Background Blur (0 to 10) and Background Overlay. | Default, blur 1 |
How It Behaves
- Rows are matched to slides by position, so row 3 is the background for slide 3.
- One row is active at a time and it follows the slide in view.
- Background Transition Duration in the same section controls how long one image takes to fade into the next.
- The overlay sits above the image, so it tints the picture without touching your slide content.
- A slide hidden on the current device is dropped from the strip, and its background row with it.
Limitations
- Use either Color or Choose Image in a row. If both are set, the image wins.
- There is no crop, focal point or size control for the background image — it fills the area as the stylesheet sets it.
- The image sits behind your template, so any background on the template’s own sections hides it.
- Background Blur stops at 10.
- The widget is Pro only. With the Pro plugin off, nothing from this widget is rendered.
Troubleshooting
The images never appear
Clear the background from the sections inside your template. They are drawn on top of the transition layer.
The text on the slides is hard to read
Open Backdrop Filter and set a semi-transparent Background Overlay, or raise Background Blur.
One slide shows a colour where I wanted an image
That row has both a Color and a Choose Image, or it is missing the image. Check the row that matches the slide’s position.
