Are you looking to change the carousel section background on slide change in Elementor? Elementor's built-in background slideshow applies a fixed image sequence to a section independently of any carousel on the page. The Row Background widget from The Plus Addons for Elementor syncs the section background directly with each carousel slide change, creating a more cohesive visual effect where the environment around the carousel responds to each transition.
With the Row Background widget and any carousel-supported widget from The Plus Addons for Elementor, you can change the section or container background in sync with each carousel slide change in the Elementor editor.
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, click here.
Best Used For:
- Portfolio and agency sites where each carousel slide showcases a different project with its own branded section background
- WooCommerce stores running a product carousel where each slide highlights a different category with a distinct background color or image
- Landing pages using Testimonials or Blog Posts carousels where each slide needs a unique visual theme to reinforce the content
Requirement – This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.
Following are the carousel-supported widgets from The Plus Addons for Elementor that you can use with the Row Background widget.
- Carousel Anything
- Switcher
- Blog Posts
- Testimonials
- Woo Products
- Gallery Listing
- Client Logos
- Team Members
- Dynamic Listing
- Magazine Slider
- Dynamic Categories
If you are using Carousel Anything as your carousel widget, see the Carousel Anything Widget u2014 Settings Overview to configure the layout, transitions, and loop options before connecting it to the Row Background widget.
For instance, we will use the Gallery Listing widget here.
To do this, add the Row Background and Gallery Listing widget to the container where you want to change the background and follow the steps —
Note: You can also keep the Row Background and the carousel supported widget in separate containers or sections. But for more creative effect we are keeping both in the same container.
1. In the Gallery Listing widget, after selecting the appropriate option, add images to the gallery from the Content tab.
2. Then, from the Layout tab, select Carousel from the Layout dropdown.
3. After that, go to the Style tab, then Carousel Options, and add a unique ID in the Unique Carousel ID field. Use a unique ID when you have more than one carousel on the same page so each carousel connects to the correct set of backgrounds rather than all carousels sharing the same trigger.
4. Then in the Row Background widget, select Carousel Background from the Select Option dropdown, under the Deep Layer tab.
5. In the Carousel Connection ID field, add the same ID you entered in the Gallery Listing widget. This links the Row Background widget to that specific carousel so the backgrounds change in sync with the slides.
From the Change Bg Effect dropdown, select the background transition effect. Use a fade effect for a gradual shift between backgrounds, or a slide effect when you want the backgrounds to move in the same direction as the carousel slides.
In the Change Transition Duration field, set the background transition duration. Use a shorter duration (200–400ms) for fast-moving carousels and a longer duration (600–900ms) when you want the background to settle visibly during each slide pause.
To add a separate navigation element that controls carousel slides independently and triggers background changes at the same time, see How to Connect Carousel Remote with a Carousel in Elementor.
6. In the Carousel Background Slides section, add the slide backgrounds. By default, you will find four repeater items. Open the first one.
7. From the Background Type section, add the background for the repeater item. You can add a solid background color, gradient, or image. Use background images when each carousel slide represents a distinct theme, such as a season, product category, or location.
Similarly, add a different background to each remaining item.
To add more slide backgrounds, click the + Add Item button.
Note: Make sure to have the same number of repeater items as the number of slides in your carousel widget.
For changing the section background with the carousel slide change, you do not need to add any background in the other layers.
As the carousel slides change, the section background will change in sync.
