Adding click listeners in a loop for Revolution Slider

Question

I'm using the Revolution Slider plugin for Wordpress. Rev Slider provides an api for changing slides or listening for events. Underneath the slider wrapper I'm dynamically adding a link to each slide using <a id="<?php echo "rev-slide-".$vid_link ?>" href="#"><?php echo $link ?></a> where $vid_link is an incrementing integer and $link is some text entered into a custom field. What I want to do in my script file is add a click listener to each link that will access the rev slider api to change the slide. So far I've tried the following:

jQuery(document).ready(function($) {

    //...

    if(typeof revapi1 === 'undefined') return;

    revapi1.bind('revolution.slide.onloaded', function() {
        var totalSlides = revapi1.revmaxslide();

        var changeSlide = function(x) {
            revapi1.revshowslide(x);
        }

        for (var i = 2; i <= totalSlides; i++) {
            jQuery("#rev-slide-" + i).click(function(e) {
                e.preventDefault();
                changeSlide(i);
            });
        }
    });
});

Here revapi1 is the var name given to the particular slider. I was having scope issues with calling revshowslide() using the for loop variable directly from within the loop itself. I tried wrapping the api call in a separate function, but it's still receiving only the final value of i. Any help on this would be appreciated.

Alexis Peters Alexis Peters · Accepted Answer · 2014-12-11T23:00:51

the "i"-variable is not available in your click-function, you could pass it like so:

jQuery("#rev-slide-" + i).click({myInt : i}function(e) {
        e.preventDefault();
        changeSlide(e.data.myInt);
 });

Adding click listeners in a loop for Revolution Slider

1 Answers