How to Create Custom Navigation for Elementor Carousels

#wordpress #webdev #tutorial

Step 1: Create the Carousel
Step 2: Create the Custom Navigation
Step 3: Connect the Carousel and New Navigation Buttons
Prebuilt Template

Elementor has several carousel widgets: Media Carousel, Testimonial Carousel, Carousel, you name it. Under the hood, these widgets use the same JavaScript library and CSS selector for the sliding effect.

The biggest issue with Elementor carousel widgets is regarding the navigation. More specifically the arrow navigation.

Well, you still have plenty of design options to customize the look of arrows. However, when it comes to placement, the options are extremely limited.

The only options you have are whether you want to place your arrows inside or outside the carousel.

It's impossible to create a carousel with the narrow navigation that has the following layout.

View live demo

You can only achieve this placement of arrows using custom code.

Step 1: Create the Carousel

First, you can create the carousel just like you usually do using one of the carousel widgets that Elementor offers. The widget that you can use are:

Image Carousel
Slides
Media Carousel
Testimonial Carousel
Loop Carousel
Carousel

You can apply any design settings to your carousel. Since you want to create the custom navigation, make sure to disable the native navigation feature that Elementor offers. You can find the option under the Content tab.

Once you are done creating the carousel, you can add the CSS ID of my-custom-nav.

Step 2: Create the Custom Navigation

Once the carousel is ready, the next step is to create the navigation.

You can use any Elementor widgets to create the navigation. Such as Button or Widget. You can also place the widgets anywhere on your page.

For example, I have two Icon widgets (one to swipe left and the other to swipe right) with the following layout.

Style the navigation per your preference. Once done, add the CSS ID of my-prev-btn for the left navigation (previous button) and my-prev-btn for the right navigation (next).

Step 3: Connect the Carousel and New Navigation Buttons

Once the carousel and navigation buttons are ready, the next step you need to do is to connect the two so that the swipe effect can take place once the buttons are clicked.

Here is the code:

<style>
    #my-prev-btn:hover,
    #my-next-btn:hover {
        cursor: pointer;
    }
</style>

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

You can add the code using the HTML widget. You can place it (the HTML widget) anywhere on your page. Not necessarily in the same container as the navigation buttons or the carousel.