Пауза цикла jQuery при наведении курсора на следующий/предыдущий

Я новичок в цикле jquery, поэтому заранее извиняюсь, если это просто глупый вопрос. Я настроил слайд-шоу на своем сайте, и все работает нормально. Однако... мое слайд-шоу настроено на паузу при наведении курсора на изображение, когда я действительно хочу сделать паузу при наведении курсора на кнопки «Далее» или «Предыдущий». Я предполагаю, что это очень просто, но я искал все и не могу найти ответ.

Вот код, который я сейчас использую:

jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({ 
fx: 'fade', 
speed: 800,
timeout: 4000, 
next: '#next2', 
prev: '#prev2',
after: onAfter,
fastOnEvent: true,
pause: 1 
});
});
function onAfter(curr,next,opts) {
var caption = 'Photo ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}
</script>

Связанный HTML:

<div id="s2" class="pics">
<a href="coral_natural_stone_1lg.jpg"><img src="coral_natural_stone_1.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" /></a>
<img src="coral_natural_stone_2.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_3.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_4.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_5.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_6.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
<img src="coral_natural_stone_7.jpg" width="1000" height="450" alt="Palm Beach Cast Stone - Coral and Natural Stone" />
</div>

<p id="caption"></p>

<div class="nav"><a id="prev2" href="#"><img src="prevbttn.jpg" width="30" height="30" alt="previous" /></a><img src="spacer.gif" width="10" height="10" alt="spacer" /><a id="next2" href="#"><img src="nextbttn.jpg" width="30" height="30" alt="next" /></a></div>

И соответствующий CSS:

.pics {  
width:   1000px;  
height:  450px;  
padding: 0;  
margin:  0;  
} 

.pics img {  
padding: 0px;  
border:  none;  
background-color: #ffffff;  
height:  450px;  
width:   1000px;  
top:  0; 
left: 0;
}

#caption {
font-family: Arial, Helvetica, sans-serif;
font-size: 75%;
color:#2769b5;
}

Любая помощь, которую кто-либо может оказать, будет оценена больше, чем вы можете себе представить. Я знаю, что это, вероятно, просто сделать, но я, честно говоря, исчерпал свои ресурсы (и около 15 страниц результатов Google!). Заранее благодарим за любую помощь, которую вы можете предложить.

Тереза

ДОБАВЛЕНО 13.01:

Пересмотрел мой код, как указано ниже, но все еще не работает (приведенный ниже jsfiddle работает отлично, именно то, что я ищу, но даже с прямой копией/вставкой, которая не работает с моей стороны). Что-то очевидное, я уверен, но с трудом. Вот мой пересмотренный код js и соответствующая информация в моем заголовке (html и css остались прежними):

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
$('#s2').cycle({ 
fx: 'fade', 
speed: 800,
timeout: 4000, 
next: '#next2', 
prev: '#prev2',
after: onAfter,
fastOnEvent: true
});
});
function onAfter(curr,next,opts) {
var caption = 'Photo ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}

$('#next2, #prev2').hover( 
function() { 
    $('#s2').cycle('pause'); 
}, 
function() { 
    $('#s2').cycle('resume'); 
} 
);

</script>