Are you looking to change the carousel section background on slide change in Elementor? Changing the section background along with the carousel background can add a dynamic effect to your website.
With the Row Background and any carousel supported widget from The Plus Addons for Elementor, you can easily change the section or container background while changing the slide of the carousel in Elementor.
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background widget, click here.
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
For instance, we’ll use the Gallery Listing widget here.
To do this, add the Row Background and Gallery Listing widget to the container 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 > Carousel Options and add a unique id in the Unique Carousel ID field.
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.
From the Change Bg Effect dropdown, you can select the background change effect.
In the Change Transition Duration field, you can set the background transition duration.
6. Then you have to add the slide backgrounds in the Carousel Background Slides section. By default, you’ll find four repeater items, open the first one.
7. From the Background Type section you have to add the background for the repeater item. You can add a background color, gradient color or image. Let’s use a background image here.
Similarly, you can add a different background to the other items.
You can click the + Add Item button to add more slide backgrounds.
Note: Make sure to have the same number of repeater items as the number of slides in your carousel widget.
For simply changing the section background with the carousel slide change you don’t need to add any background in the other layers.
Now as the carousel slider slide changes the section background will change.
