How to Create Custom Navigation for Elementor Carousels

Some time ago, I created a new Elementor landing page template and wanted to add a testimonial carousel section. After making some tweaks, I realized that Elementor lacks styling options for the carousel navigation.

It's true that you can customize both the arrow navigation and the dot navigation. But when it comes to navigation placement, there's not much you can do.

After spending some time, I finally managed to create a custom navigation using the Icon widgets for my carousel section. And in this post, I will share the method.

Shortcuts ⤵️

• Why create custom navigation?
• Create the carousel
• Create the custom navigation
• Connect the carousel and navigation
• Video ▶️
• Summary

Why Bother Creating a Custom Navigation?

In Elementor, you have 5 widgets that you can use to create a carousel:

• Image Carousel
• Loop Carousel
• Media Carousel
• Testimonial Carousel
• Carousel

Each widget above has similar setting options. For the navigation, you have two options to choose from: arrow navigation and dot navigation.

As I mentioned earlier, there's not much you can do regarding the navigation placement. The arrow navigation, for instance, only has two placement options: inside and outside the carousel.

What if you want to place the navigation, for instance, beneath the carousel content?

Or maybe you want to place it above the carousel content with the right alignment like the one below.

That's how this tutorial comes into play.

By the end of this tutorial, you should be able to create a custom navigation for your carousel. You can place the navigation anywhere you want.

You can apply this tutorial on all of the mentioned carousel widgets.

Creating Custom Navigation for Carousel Widgets in Elementor

Step 1: Create the Carousel

Before you create the navigation for a carousel, you definitely need to have the carousel itself. In Elementor, you can use one of the following widgets to create the carousel:

• Image Carousel: To create an image carousel
• Loop Carousel: To create a carousel with dynamic content
• Media Carousel: To create a media carousel (image and video)
• Testimonial Carousel: To create a testimonial carousel
• Carousel: To create carousel populated with any content/widget

In this example, I will show you how to create a custom carousel for the Carousel widget. Here is the design.

Again, you can use any carousel widgets. Also, you can apply any design according to your preference.

Disable the Navigation

Since you want to create a custom navigation, you can disable the navigation on your carousel. To do so, open the Navigation settings block and switch the Arrows option off.

For a cleaner design, you can also disable the pagination. Open the Pagination settings block and set it to None. This will hide the pagination feature on your carousel.

Add CSS ID to the Carousel

This is a crucial step. The CSS ID will be used on the code to connect your carousel with the navigation.

To add the CSS ID, you can go to the Advanced tab and open the Layout block. Type the CSS ID on the CSS ID field. You can use any name for the CSS ID.

In this example, the CSS ID I use is my-custom-navigation.

Step 2: Create the Navigation

Once your carousel is ready, the next step is to create the custom navigation. You can use any widget to create the navigation. From the Button widget, Icon widget, to Heading widget.

Regarding the placement, you can place it anywhere on your page. You can place it in the same container as the carousel or to a different container.

In this example, I use two Icon widgets with the following placement.

Add CSS ID to Each Navigation Widget

The next step after you are done designing the navigation is to add the CSS ID of each widget. The CSS IDs will be used to connect the navigation widgets with the carousel widget.

Same as the carousel, you can also use any CSS ID for navigation widgets.

In this example, I use my-custom-navigation-left as the CSS ID for the left navigation widget and my-custom-navigation-right as the CSS ID for the right navigation widget.

Step 3: Add the Code to Connect the Carousel and Navigation

You are almost done.

In this last step, you need to add the code to connect the carousel and the navigation. To do so, you can use the HTML widget.

You can place the HTML widget anywhere on your page. But I strongly recommend you to place it in the same container as the container of the navigation widgets for easier management.

Here is an example of the HTML widget placement on my design.

And here is the code:

<style>
    #my-custom-navigation-left:hover,
    #my-custom-navigation-right:hover {
        cursor: pointer;
    }
</style>

<script>
     jQuery(document).ready(function($) {
     function getSwiperInstance() {
        var swiperTarget = $('#my-custom-navigation .swiper');
         return swiperTarget.data('swiper');
     }
     $('#my-custom-navigation-left').on('click', function() {
  getSwiperInstance().slidePrev(500, true);
 });
     $('#my-custom-navigation-right').on('click', function() {
  getSwiperInstance().slideNext(500, true);
 });
    });
</script>

The above code consists of two parts: CSS and JavaScript.

The CSS code starts with the <style> tag and ends with the </style> tag. While the JavaScript code starts with the <script> tag and ends with the </script> tag.

The CSS code is used to turn the cursor into index finger/pointer when you hover your cursor over a button navigation. While the JavaScript code is used to connect your carousel with navigation buttons to add the navigation functionality.

Editing the Code

If you use the different CSS IDs from mine, make sure to edit the code to tailor the CSS IDs. I've created the following annotation to make it easy for you to edit the code.

One thing to note. Make sure you don't delete the hashtags on the code. Otherwise, your code will not work.

You can preview your page after editing the code.

Tutorial Video

To make it easy for you to follow the steps in this tutorial, I created the following video.

Summary

Elementor has five widgets which you can use to create a carousel. They come with setting options to enable navigation. However, there is a serious issue regarding the navigation placement.

Creating a custom navigation gives you absolute control over the navigation design and placement.

You can follow the above steps if you want to create a custom navigation for your carousel. The key steps are:

• Create the carousel and add a CSS ID
• Create the navigation using any widget (e.g., the Icon widget) and add CSS IDs to each navigation button
• Add code snippet to connect the carousel and navigation buttons

If you need an example of the real use case of custom navigation for Elementor carousel, you can preview this template.