Fade in the next element of a specific class after animation on the Orbit slider

Question

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>

Bhadra Bhadra · Accepted Answer · 2013-03-25T10:24:00

//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)

Fade in the next element of a specific class after animation on the Orbit slider

2 Answers