Slider with navigation in Elementor free - no plugin | Wordpress tutorial

How to create a custom navigation for a slider (carousel) in Elementor free (or Pro) plugin for Wordpress.

Relevant Elementor documentation fro swiper: https://developers.elementor.com/expose-swiper-in-elementor/


Instagram: https://www.instagram.com/jcweb.tech/
Facebook: https://www.facebook.com/JCwebTECHcz
My portfolio: https://jcweb.tech/

...........

Code:

JS code (check update bellow):
// Slider navigation JS

jQuery(window).load(function () {
const imageCarousel = jQuery(".myslider .swiper-container"),
swiperInstance = imageCarousel.data("swiper");

jQuery("#slide0").click(function () {
swiperInstance.slideTo(1);
});
jQuery("#slide1").click(function () {
swiperInstance.slideTo(2);
});
jQuery("#slide2").click(function () {
swiperInstance.slideTo(3);
});
jQuery("#slide3").click(function () {
swiperInstance.slideTo(4);
});
jQuery("#slide4").click(function () {
swiperInstance.slideTo(5);
});

if (swiperInstance != undefined) {
swiperInstance.on("slideChange", function () {
var slide = String(swiperInstance.realIndex);
jQuery(".slide_nav").removeClass("active");
jQuery("#slide" + slide).addClass("active");
});
}
});

CSS code:
.slide_nav {
cursor: pointer;
}

.slide_nav.active {
border: 1px solid #555555;
border-radius: 6px;
}

Elementor section template to download:
https://bit.ly/3678XRu
-------------------------------
Update:

You may need to change indexing in the javascript code to:

jQuery("#slide0").click(function () {
swiperInstance.slideTo(0);
});
jQuery("#slide1").click(function () {
swiperInstance.slideTo(1);
});
jQuery("#slide2").click(function () {
swiperInstance.slideTo(2);
});
jQuery("#slide3").click(function () {
swiperInstance.slideTo(3);
});
jQuery("#slide4").click(function () {
swiperInstance.slideTo(4);
});