jQuery循环无关标题

我正在尝试从循环调用中创建从属标题显示：

$('#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>

标题1
咨询

服务
标题2
咨询

服务
标题3
咨询

服务
画廊形象
画廊形象
画廊形象

你知道如何实现吗

arr.eq(currSlideElement).show();

或者如果您有“活动”类来控制可见性

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

我不知道这是否也适用：

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

我想这最后一段是最合适的