responsiveslides.js execute code per slide on transition

Question

I'm using ResponsiveSlides.js on my site for a slider. But I'm using JQuery to perform an action within each slide, and I need to call that code each time the slide is made "active".

My code looks something like this:

<ul class="rslides">
    <li> <!-- slide 1 -->
    <script>
        // Do something
    </script>
</li>
<li> <!-- slide 2 -->
    <script>
    // Do something else
    </script>
</li>
</ul>

At this point I have the JS code inside a $( document ).ready(function() {}); within each <li>, but obviously that only executes that code when the page loads. The third block is done executing by the time the slide transitions from the first slide to the next. Even worse, the code for the first slide will never re-execute when the first slide becomes active again, nor the second, etc.

I'm very new to JQuery and JavaScript in general. I've read the ResponsiveSlides.js documentation but it hasn't been helpful for this situation, it doesn't seem capable of .

I've thought of three ways to get the code the execute, but have no leads on any of them.

1. A built-in function in ResponsiveSlides.js itself, a sort of onActive(). This doesn't seem to exist. The before: function(){} seems to call the same function on every slide.
2. Some way of calling the code each time ResponsiveSlides.js changes the CSS class to make a slide "active".
3. Some way relatively straightforward way to "reload" a particular block of HTML without reloading the whole page.

Thanks for your help.

Answer 1

I am not sure what kind of js on per slide change you were trying to execute but I make a mockup sample which might give u some idea how to use before/after callbacks and help u to call some js on per slide active..

  http://jsfiddle.net/nSP4A/3/