RUVIDEO
Поделитесь видео 🙏

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);
});

Что делает видео по-настоящему запоминающимся? Наверное, та самая атмосфера, которая заставляет забыть о времени. Когда вы заходите на RUVIDEO, чтобы посмотреть онлайн «Slider with navigation in Elementor free - no plugin | Wordpress tutorial», вы рассчитываете на нечто большее, чем просто загрузку плеера. И мы это понимаем. Контент такого уровня заслуживает того, чтобы его смотрели в HD 1080, без дрожания картинки и бесконечного буферизации.

Честно говоря, Rutube сегодня — это кладезь уникальных находок, которые часто теряются в общем шуме. Мы же вытаскиваем на поверхность самое интересное. Будь то динамичный экшн, глубокий разбор темы от любимого автора или просто уютное видео для настроения — всё это доступно здесь бесплатно и без лишних формальностей. Никаких «заполните анкету, чтобы продолжить». Только вы, ваш экран и качественный поток.

Если вас зацепило это видео, не забудьте взглянуть на похожие материалы в блоке справа. Мы откалибровали наши алгоритмы так, чтобы они подбирали контент не просто «по тегам», а по настроению и смыслу. Ведь в конечном итоге, онлайн-кинотеатр — это не склад файлов, а место, где каждый вечер можно найти свою историю. Приятного вам отдыха на RUVIDEO!

Видео взято из открытых источников Rutube. Если вы правообладатель, обратитесь к первоисточнику.