Как переключать слайды по клику по ссылке в Elementor?

Question

[Алексей]

Доброго времени суток!
Сразу скажу, в теме - полный ноль.
В виджете Elementor Media Carousel хочу назначить ссылки, при нажатии на которые будут включаться определенные слайды в двух слайдерах. Вроде как, нашел решение slickGoTo, вот даже вроде код: https://br.wordpress.org/support/topic/uso-de-link...

jQuery(document).ready(function($) {
$('a[href^="#service-slider-"]').on('click', function(event) {
event.preventDefault();

var index = $(this).attr('href');
index = index.substr(16);
index = parseInt(index);

if (isNaN(index)) {
return;
}

jQuery('#service-slider-section .slick-slider').slick('slickGoTo', index);
});
});

но вставляю в виджет HTML - я так понимаю, чего-то не хватает в нем, id секции и id слайдера? я их вроде как нашел ,пробовал ставить, но ничего не происходит, может я неверно пишу синтаксис?



И как мне обращаться из этого кода сразу к двум слайдерам, чтобы у них одновременно переключались слайды, при условии что у них должны переключаться попарно одни и те же страницы: 0 0, 1 1, 2 2 и т.д.

Answer 1

[Алексей]

Кому интересно, нашел решение, нужно вставить в блок виджет HTML-код

<script>
jQuery(document).ready(function($) {
    // инициализируем первый слайдер
    var serviceSlider1 = new Swiper('#service-slider-1 .elementor-slides-wrapper', {
        // опции первого слайдера
    });

    // инициализируем второй слайдер
    var serviceSlider2 = new Swiper('#service-slider-2 .elementor-slides-wrapper', {
        // опции второго слайдера
    });

    // обработчик события клика на ссылку
    jQuery('a[href^="#service-slider-"]').on('click', function(event) {
        event.preventDefault();
        var index = jQuery(this).attr('href');
        index = index.substr(16);
        index = parseInt(index);

        if (isNaN(index)) {
            return;
        }

        // обращаемся к каждому слайдеру по отдельности и изменяем индекс
        document.querySelector('#service-slider-1 .elementor-slides-wrapper').swiper.slideTo(index);
        document.querySelector('#service-slider-2 .elementor-slides-wrapper').swiper.slideTo(index);
    });
});
</script>

А в необходимые слайдеры в расширенных настройках задать ID service-slider-1 и service-slider-2