Перейдите к определенному слайду Swiper в Elementor Pro

Я использую виджет слайдов Elementor Pro, основанный на swiper.js, и хочу использовать функцию slideTo(), которую предлагает swiper для перехода к определенному слайду. Я не мог найти способ обратиться к слайдеру с помощью javascript. Я пробовал добавить что-то вроде

$('.btn').on('click', function() {
mySwiper.slideTo(2)
});

or

$('.btn').on('click', function() {
mySwiper[0].slideTo(2); // in case there is more than one swiper element
});

Но это не сработало, так как я не смог идентифицировать слайдер.

Анализируя frontend.js от Elementor, я все еще не мог понять, как в плагине вызываются экземпляры swiper. Кому-нибудь удалось найти способ вызова ползунков swiper, которые исходят от Elementor?

Заранее спасибо.

Вопрос, вероятно, также может быть связан с этим вопросом Определить ссылку на уничтожение & Повторно инициализировать Swiper в Elementor


javascript wordpress jquery swiper elementor
person Bradley    schedule 01.11.2019    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Приведенный выше код не работал у меня, потому что я использовал «Блоки сообщений AE-elementor», чтобы показывать продукты woocommerce в виде слайдера. Это помогло мне на этом пути, поэтому я опубликую здесь свое решение для тех, кто не скользит по картинкам, а публикует через 'блоки сообщений AE'.

Приведенный выше код вернул значение null, поэтому я не смог добраться до своего слайдера. Вот как я в итоге сделал:

var mySwiper = new Swiper ('#slider1 .swiper-container');
mySwiper.slideTo(2);

В некоторых случаях возможно, что сценарий ползунка перезаписывает ваш собственный код, потому что он добавляется позже. Так было в моем проекте, поэтому я немного задержал сценарий.

setTimeout( function(){ 
        var mySwiper = new Swiper ('#gr-week-swipe .swiper-container');
        mySwiper.slideTo(2);
}  , 500 );

Теперь все работает нормально. Спасибо @AlanRezende, ваш код помог мне на этом пути!

person Gert-Jan Feijens    schedule 28.01.2020
comment
Герт-Ян Фейенс, не могли бы вы объяснить, как вы реализовали это в Elementor. Я пытаюсь реализовать несколько строк сообщений и перейти к любому из них с помощью якорной ссылки. Большое спасибо Пит - person Pete Harrison; 17.04.2020

arrow_upward
1
arrow_downward

Вы можете присвоить ID виджету Elementor ex: slider1, а затем с помощью JS вы можете использовать:

var sliderInstance = document.querySelector('#slider1 .swiper-container').swiper;

После этого вы можете звонить sliderInstance.slideTo(2) куда хотите.

person Alan Rezende    schedule 31.12.2019