Creating a Carousel With Custom Navigation Arrows in Elementor gives you full control over both design and user interaction, enabling you to build more intuitive and personalized browsing experiences. Instead of relying on the default carousel controls, you can assign your own buttons, icons, or elements to navigate through slides with complete creative freedom. In this tutorial, we’ll guide you through setting up custom navigation for any Elementor carousel and show you how to enhance both usability and visual consistency across your layouts.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Conditions widget to your Elementor website
To add conditions to your Elementor carousel, install the Conditions widget from the Unlimited Elements Widget library.
Step #3: Add the Content Carousel Widget to Use as a Navigation Arrow
In the Elementor editor, locate the Content Carousel widget and drag it to the desired section of your page. We will use it as a custom navigation arrow. Choose the items source accordingly, then navigate to the Connected Widgets Settings section and enable the remote connection functionality for this widget.
Next, select the Widget Name and Sync Group. Later, you will use the same parent name and sync group for the Unlimited Carousel, Background Slider, and the Conditions widget to keep everything synchronized.
Finally, assign a unique CSS ID to the widget. This ID will be used as the Trigger Selector in the Conditions widget.
Step #4: Add the Conditions Widget to Control an Elementor Carousel With Custom Navigation Arrows
Next, in the Elementor editor, locate the Conditions widget and drag and drop it anywhere on your page.
Elementor Conditions Widget General Settings
Action
This sets the primary command that is executed:
Show: Makes a hidden element visible.
Hide: Makes a visible element hidden.
Toggle: Switches the visibility state (if shown, hides it; if hidden, shows it).
Add Class (Pro): Adds a specified CSS class to the element.
Remove Class (Pro): Removes a specified CSS class from the element.
Toggle Class (Pro): Adds the class if it's not present, or removes it if it is present.
Open Elementor Popup / Toggle Elementor Popup / Close Elementor Popup (Pro): Controls the visibility of standard Elementor Popups.
UE Remote Connection (Next/Previous/Go to Item) (Pro): Controls elements remotely, likely for sliders or tabs (from a third-party addon like Ultimate Elementor/Unlimited Elements).
UE Open Simple Popup / UE Toggle Simple Popup / UE Close Simple Popup (Pro): Controls the visibility of a simple popup element (from a third-party addon).
Animation
This determines the transition effect when the action is executed:
None: No animation; the change is instantaneous.
Fade: The element gradually appears or disappears.
Slide: The element slides into or out of view.
Remote Settings
Select the remote parent name. It must match the name used in the Content Carousel widget.
Add the Rules for the Conditions Widget
Title
Sets an internal name for the specific rule.
Trigger Type
Selects the type of user interaction that starts the action.
Click: The action is triggered when the user clicks the element defined in the Trigger Selector.
Mouse Enter: The action is triggered immediately when the user's mouse pointer moves over the Trigger Selector element.
Mouse Leave: The action is triggered immediately when the user's mouse pointer moves away from the Trigger Selector element.
Focus: The action is triggered when the user focuses on an input field.
Blur: The action is triggered when an element loses focus.
Keydown: The action is triggered when the user presses a key while focused on the element.
Day of the Week: The action is triggered based on the current day of the server's week.
Time of the Day: The action is triggered based on the current time of the server.
Current Date: The action is triggered based on a specific calendar date.
ACF Field: The action is triggered based on the value or status of a specific field created using the Advanced Custom Fields (ACF) plugin.
Trigger Selector
Enter the same CSS ID given in the content carousel widget to connect both widgets.
Target Selector
Specifies the CSS selector of the element that is affected by the action.
Wrapping it Up!
Building a Carousel With Custom Navigation Arrows allows you to elevate a simple Elementor carousel into a more engaging, interactive, and on-brand experience. By linking your own custom buttons or icons to the slider, you gain full control over how users navigate through your content while keeping your design cohesive and unique. Whether you’re showcasing testimonials, products, or images, this approach delivers a polished user experience and greater creative flexibility. Continue exploring our tutorials to unlock even more advanced design possibilities with Elementor.