jQuery Cycle2 on hover image issue

Question

Using jQuery Cycle2 Plugin Pictures rotating is started on hover on the image which is working fine but how would I reverse to the first image in the list on hover out event.

HTML

  <div class="col-md-15 col-sm-3">
     <ul class="cycle-slideshow1"
           data-cycle-slides="li"
           data-cycle-fx=shuffle
           data-cycle-shuffle-right=0
           data-cycle-shuffle-top="-75"
           data-cycle-timeout=1000
           data-cycle-caption="#alt-caption"
           data-cycle-caption-template="{{alt}}"
      >

                    <!-- Slideshow
                    =========================-->
     <li><a href="/"><img alt="caption1" class="img-responsive" src="/wp-content/uploads/2014/05/1.jpg"/></a></li>
                    <li><a href="/"><img alt="caption2" class="img-responsive" src="/wp-content/uploads/2014/05/2.jpg"/></a></li>
                    <li><a href="/"><img alt="caption" class="img-responsive" src="/wp-content/uploads/2014/05/4_small.jpg"/></a></li>

                </ul>
                <div class="cycle-caption">SHOP</div>
            </div>

jQuery

$('.cycle-slideshow1').cycle('pause');
$('.cycle-slideshow1').hover(function () {
    //mouse enter - Resume the slideshow
    $('.cycle-slideshow1').cycle('resume');
    $(this).parent().find('.cycle-caption').fadeIn();
},
function () {
    //mouse leave - Pause the slideshow
     $('.cycle-caption').hide();
    $('.cycle-slideshow1').cycle('pause');
}); 

Answer 1

There's a goto command for Cycle per the api. I've added it in the mouseout portion of the hover event handler.

$('.cycle-slideshow1').cycle('pause');
$('.cycle-slideshow1').hover(function () {
    //mouse enter - Resume the slideshow
    $('.cycle-slideshow1').cycle('resume');
    $(this).parent().find('.cycle-caption').fadeIn();
},
function () {
    //mouse leave - Pause the slideshow
    $('.cycle-slideshow1').cycle('goto', 0);
    $('.cycle-caption').hide();
    $('.cycle-slideshow1').cycle('pause');
});