I'm using the Orbit slider, and after each slide animation, you can run a function.
I have four classes that contain content, and want to hide all of them bit the first div, and then fade in/out to show the second one after the first animation, so on and so forth until the end of the slides, where it loops back to the beginning, so the content stays in sync with the slider.
The HTML markup:
<div class="contentSlider">Content for slider 1</div>
<div class="contentSlider">Content for slider 2</div>
<div class="contentSlider">Content for slider 3</div>
<div class="contentSlider">Content for slider 4</div>
The Orbit plugin script is:
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit({
animation: 'horizontal-push', // fade, horizontal-slide, vertical-slide, horizontal-push
animationSpeed: 800, // how fast animtions are
timer: true, // true or false to have the timer
advanceSpeed: 10000, // if timer is enabled, time between transitions
pauseOnHover: false, // if you hover pauses the slider
directionalNav: true, // manual advancing directional navs
captions: false, // do you want captions?
captionAnimation: 'fade', // fade, slideOpen, none
captionAnimationSpeed: 800, // if so how quickly should they animate in
bullets: true, // true or false to activate the bullet navigation
bulletThumbLocation: '', // location from this file where thumbs will be
afterSlideChange: function(){
// function to keep the content below the slider in sync with the slider.
}
});
});
</script>
//set to correct bullet
setActiveBullet();
Before this line in jquery.orbit.js in shift function(line 332 in jquery-orbit-1.2.3.js)
alert(activeSlide);
it gives the current slide value; based on the current slide value you can hide or show the
eq(activeSlide)
of the caption class and play with it.(fadeIn or fadeOut)