jQueryのサイクルの独立したキャプション

Question

私は、サイクル呼び出し内から依存キャプション表示を作成しようとしています：

$('#slideshow-images').cycle({ 
     fx: 'scrollVert', 
     pager: '#slideshow-navigation', 
     activePagerClass: 'active', 
     timeout: 8000, 
     delay: 2000, 
     manualTrump:false, 
     before: captionProgress 
}); 

function captionProgress(currSlideElement, nextSlideElement, options, forwardFlag) { 
    var arr = $('.slideshow-caption'); 
    // need to do something here but don't know what... 
} 

ので、新しい画像スライドの前にあること - キャプションが同じインデックスを持つ - キャプションの変更私は、正しいキャプションをどのようにトリガーするのかはよく分かりません。

はここで、スライドショーの構造です：

<div id="slideshow-captions"> 
    <div class="slideshow-caption active"> 
     <h2>Heading 1</h2> 
     <h1>Consulting<br /> 
     Services</h1> 
    </div> 
    <div class="slideshow-caption"> 
     <h2>Heading 2</h2> 
     <h1>Consulting<br /> 
     Services</h1> 
    </div> 
    <div class="slideshow-caption"> 
     <h2>Heading 3</h2> 
     <h1>Consulting<br /> 
     Services</h1> 
    </div> 
</div> 

<div id="slideshow-images"> 
    <div class="slideshow-image"> 
     <h1 class="heading">Gallery image</h1> 
     <img src="/images/header/01.jpg" alt="" width="620" height="304" />  
    </div> 
    <div class="slideshow-image"> 
     <h1 class="heading">Gallery image</h1> 
     <img src="/images/header/02.jpg" alt="" width="620" height="304" />    
    </div> 
    <div class="slideshow-image"> 
     <h1 class="heading">Gallery image</h1> 
     <img src="/images/header/03.jpg" alt="" width="620" height="304" />   
    </div> 
</div> 

それを達成するためにどのように任意のアイデア？

Answer 1

arr.eq(currSlideElement).show(); 

それとも、可視性

arr.find('.active').removeClass('active'); 
arr.eq(currSlideElement).addClass('active'); 

を制御する「アクティブ」クラスを持っている場合、これはあまりにも動作するかどうかはわからない：

arr.eq(currSlideElement).removeClass('active'); 
arr.eq(nextSlideElement).addClass('active'); 

私はこの最後のスニペットがあるとしぴったりの。