Elementor is a powerful page builder for WordPress that allows users to create stunning websites with ease. One of its features is the Elementor Slider, which can showcase images or content in a sliding carousel. Sometimes, you might want to create navigation controls outside of the Elementor Slider widget itself. This can be achieved using custom JavaScript and jQuery.
In this guide, we’ll walk you through how to implement remote navigation for an Elementor Slider using the provided JavaScript code. This code allows you to control the slider with custom buttons placed anywhere on your webpage.
You can use a button widget or icon or image to create a remote button.
Then, add the following ID to the appropriate one.
The previous button add ID “prevbutton“
Next button add ID”nextbutton“
ADD ID to target carousel:
You need to add this ID to the carousel you want to control if you want the remote navigation control it.
Go to advance >> CSS ID add “carousel-target“
Add JS:
Select HTML widget in Elementor then add the following code.
JS
Add CSS Mouse Pointer
Add this CSS below to have the mouse hover cursor
CSS
That’s it
By following these steps, you can create custom navigation for your Elementor Slider that works from anywhere on your webpage. This flexibility allows you to design your layout without being constrained by the widget’s default controls. Enjoy enhancing your Elementor-driven website with this simple yet powerful JavaScript solution!
