(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Custom Remote Arrows to Control Multiple Carousel with Elementor
The code below allows you to control multiple Elementor carousels with your custom arrows. In the below code, it can control up to 4 carousels but it can be extended pretty easily to any number you want.
#my-elementor-carousel, #my-elementor-carousel2, #my-elementor-carousel3 – are CSS ID for the carousels. You can add more by adding extra in the below code.
#my-prev-element – Is the CSS ID of the element that moves the carousel to the left side.
#my-next-element – Is the CSS ID of the element that moves the carousel to the right side.
var clickInterval = 1200 – here the 1200 specifies when the next and previous button can be clicked again. Make sure to keep it higher than the transition duration of all carousels else the multiple carousels will be asynchronized.
getSwiperInstance(‘#my-elementor-carousel’).slideNext(500, true); – In this code, the 500 is transition duration for the first carousel. Make sure you change it for both next and prev.
<style>/*This code makes the carousel non-clickable and touchable - Remove it if not needed*/
#my-elementor-carousel,
#my-elementor-carousel2,
#my-elementor-carousel3,
#my-elementor-carousel4
{
touch-action: none;
pointer-events: none;
}
</style>
<script>
jQuery(document).ready(function($) {
var lastClickTime = 0;
var clickInterval = 1200; // Adjust the interval time (in milliseconds) as needed
function getSwiperInstance(selector) {
return $(selector + ' .swiper').data('swiper');
}
function canClick() {
var currentTime = Date.now();
return currentTime - lastClickTime >= clickInterval;
}
function updateLastClickTime() {
lastClickTime = Date.now();
}
$('#my-prev-element').on('click', function() {
if (!canClick()) return;
updateLastClickTime();
getSwiperInstance('#my-elementor-carousel').slidePrev(500, true);
getSwiperInstance('#my-elementor-carousel2').slidePrev(500, true);
getSwiperInstance('#my-elementor-carousel3').slidePrev(1000, true);
getSwiperInstance('#my-elementor-carousel4').slidePrev(700, true);
});
$('#my-next-element').on('click', function() {
if (!canClick()) return;
updateLastClickTime();
getSwiperInstance('#my-elementor-carousel').slideNext(500, true);
getSwiperInstance('#my-elementor-carousel2').slideNext(500, true);
getSwiperInstance('#my-elementor-carousel3').slideNext(1000, true);
getSwiperInstance('#my-elementor-carousel4').slideNext(700, true);
});
});
</script>
