Вызвать событие перехода к следующему слайду

[Dark Wizard]

Есть слайдер https://crocoblock.com/widgets/slider/

как мне для другого элемента вне слайдера (какой-нибудь ссылки, например), прописать событие onclick, чтобы осуществлялся переход к следующему/предыдущему слайду в слайдере?

Пробовал отслеживать события в консоли:

• Открываем Chrome dev tools (F12)
• вкладка Sources
• Справа спойлер Event Listener Breakpoints
• Ставим галочку на событиях, которые нас интересуют

но так и не разобрался...

 

[innerjoin86]

На странице документации есть примеры вызова публичных методов скрипта.
Сначала с помощью JQuery на какой-то элемент вешаете событие 'onclick', затем из него вызываете публичный метод как-то так

$( '#my-slider' ).sliderPro( 'nextSlide' );

 

[Dark Wizard]

На странице документации есть примеры вызова публичных методов скрипта.
Сначала с помощью JQuery на какой-то элемент вешаете событие 'onclick', затем из него вызываете публичный метод как-то так

А причём тут sliderPro ? У каждого слайдера своя реализация, меня интересует конкретно работа со слайдером Crocoblock.

 

[Absolute]

Есть слайдер https://crocoblock.com/widgets/slider/

Че-то нет нормальной документации на эту штуку. Вызывайте события на элементах (как вариант)
Следующий слайд:

jQuery('.sp-next-arrow').click()

Предыдущий слайд:

jQuery('.sp-previous-arrow').click()

 

[innerjoin86]

А причём тут sliderPro ? У каждого слайдера своя реализация, меня интересует конкретно работа со слайдером Crocoblock.

Вероятно потому, что так называемый слайдер от Crocoblock использует бесплатный скрипт SliderPro (но более старую версию 1.4.0, чем на GitHub 1.5.0). Ссылка на используемый скрипт слайдера от Crocoblock и ссылка на оригинал на GitHub.
Как говориться, "попробуйте найти 5 отличий"?

Так делают многие. Берут бесплатный скрипт , делает обертку вокруг него и затем продают за деньги.

 

[Dark Wizard]

Вызывайте события на элементах (как вариант)

Это бы подошло, если бы я не хотел отключить потом стрелочки по-умолчанию...

Вероятно потому, что так называемый слайдер от Crocoblock использует бесплатный скрипт SliderPro

А какой тогда код будет? Такой не работает:

<script>
$('#slider1_next').click(function() {
$( '#slider1' ).sliderPro( 'nextSlide' );     
});

</script>

 

[innerjoin86]

Для примера на странице https://crocoblock.com/widgets/slider/ открываем инструменты разработчика (F12).
1. На вкладке "elements" находим корневой элемент слайдера

<div class="slider-pro sp-horizontal slider-loaded" style="width: 100%; max-width: 100%;">

Т.к. класс 'slider-pro' прописан для нескольких слайдеров на демо-странице нужно его как-то идентифицировать, т.е. добавить идентификатор (н-р, js-slider-pro) на той-же вкладке "elements". В итоге код будет таким

<div class="slider-pro sp-horizontal slider-loaded" style="width: 100%; max-width: 100%;" id="js-slider-pro"></div>

2. В инструментах разработчика переходим на вкладку 'consol' и вводим такой код из документации (см. ссылку выше в постах)

var slider = jQuery('#js-slider-pro').data('sliderPro');
slider.previousSlide();

который приведет к перелистыванию слайдера влево.
Подобный код нужно вставлять в функцию для 'click' для левой стрелки.
Для правой стрелки код будет следующим

var slider = jQuery('#js-slider-pro').data('sliderPro');
slider.nextSlide();