How to trigger a Slide change on another Slider

This article will show you how to change a slide on another slider using custom JS with Slider API.

Table of Content

Step 1

Navigate to your main slider’s “Custom JavaScript” section:
/faq/custom-css-javascript/

Step 2

Add to the Slider (Main Slider with bullets) the code below

revapi1.bind("revolution.slide.onbeforeswap",function (e,data) {
	revapi2.revshowslide(data.nextSlideIndex);
});

Step 3

Change the revapi id’s for both sliders

Slider 1 (Main Slider) – revapi1

Slider 2 (Secondary Slider) – revapi2

Note : You can find the Slider API number in the Slider API “Methods

Result :

Clicking on the Navigation Bullets/Arrows will trigger the slide change automatically on another slider.


How to trigger a Slide change on another Slider

The Author

KC

Strength does not come from winning. Your struggles develop your strengths. When you go through hardships and decide not to surrender, that is strength.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.