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.

This is Slide 1 Enjoy the work with Slider Revolution Welcome to Slide 2 Enjoy the work with Slider Revolution Just hit Slide3 Enjoy the work with Slider Revolution

Module 2 / Slide 1 Isn' this Amazing ? Module 2 / Slide 2 Still Rocking the Web Module 3 / Slide 3 Every day is Perfect with Slider Revolution
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.

If you need help with anything related to our plugin, please comment on a post or email me at [email protected].

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published. Required fields are marked *