Search code examples
javascriptjquerywordpressslider

Triggering controllers on 2 separate sliders

(I am using the WordPress Slider Revolution plugin.)

The setup is that there are two sliders adjacent from each other-- one slider has the name and description of the service and the other is a simple image slider. The idea is that if a user clicked the third bullet on the service slider, this would also trigger the third bullet on the image slider to be clicked as well.

I put some simple jQuery in to apply this behavior, however after some testing I found that the jQuery wouldn't detect the click event on the bullet. This is the function I am trying to implement:

jQuery(document).ready(function( $ ) {
   $("#rev_slider_3_2_wrapper .ares .tp-bullet:nth-child(2)").on("click", function() {
      $("#rev_slider_5_1_wrapper .ares .tp-bullet:nth-child(2)").trigger("click");
});

I did some testing by adding a button and attaching a click event to that. This seemed to trigger the click on the bullet properly:

$(".fusion-button.button-1").on("click", function() {
   $("#rev_slider_3_2_wrapper .ares .tp-bullet:nth-child(2)").trigger("click");
   alert("button clicked");
});

So, the trigger.click property seems to work but not on.click.

Any suggestions are appreciated.

Solution

  • We've prepared an article for this here https://www.sliderrevolution.com/faq/triggering-slide-change-on-another-slider/ and you can use the custom JS code provided.

    Take note that you need to assign the correct Slider API ID on the JS code.