There is always a time when you see a section on a website and you want to replicate it in your WordPress website. It’s that time but we will do with the help of custom code.
In this article, I’ll show you how you can synchronize a background slideshow with an Elementor Loop Carousel Widget inside it. So if you click to navigate any loop carousel item, the background slideshow is also going to change with it. This is going to be done with the help of custom JavaScript code.
Before You Begin:
- You will need to have Elementor Pro installed as this tutorial is based on the Pro widget which is the Loop Carousel Widget.
- You will be adding custom JavaScript code into your website via the Elementor Custom Code feature.
- You will need to build everything into one container so that includes the slideshow and the loop carousel widget.
So now, let’s get started and Sync our slideshow with Loop Carousel Widget.
Build Your Section
In order for the whole synchronization of slideshow with the loop carousel widget to work you need to build your container that has the following:
- A background slideshow.
- Content in the container.
- A Loop Carousel Widget with 1 slide display only.
You will need to have your section as below:
Now, you will need to add background slideshow to your primary container or the biggest section which will contain all content as shown below:
After adding a background slideshow, you can add your further content and then add your Loop Carousel Widget having exact same number of items as the number of slides.
I have added 3 slides to background, so I am having 3 loop carousel items as well as shown below:
Adding CSS IDs
We need to add CSS IDs that is going to help the JavaScript code identify the elements on the page and act so the synchronization works properly fine.
There are two CSS IDs you need to add:
- outer-slider-box This CSS ID is going to be added to the primary container/section of the page which has the content.
- inner-slider-box This CSS ID will be given to the exact Loop Carousel Widget itself.
- Now you have added CSS IDs to both your primary container and the loop carousel widget itself.
Adding The Custom JavaScript Code:
In order to add your custom JavaScript into your website, you can either add it directly via HTML widget but that becomes a little bit messy. You can follow the steps below to add it via Custom Code feature:
- Go to Dashboard.
- Hover on Elementor and click on “Custom Code” as shown below:
- Click on “New Code”
- Add the following given code to the page.
- Set the location to </body> – End as shown below:
- Click on Publish.
Here is the code you need to add:
After adding the code, save everything and you can view the page on the front-end.
You will see that if you click on the navigation dots of the Loop Carousel Widget, the background slides are going to change along with them.
