/ / jQueryのサイクル2でホバー画像の問題 - jquery、プラグイン、サイクル

jQuery Cycle2 on hover画像の問題 - jquery、プラグイン、サイクル

jQuery Cycle2 Pluginを使う画像の回転は正常に動作している画像上で開始されますが、ホバーアウトイベントでリストの最初の画像に反転する方法はありますか。

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="/images//wp-content/uploads/2014/05/1.jpg"/></a></li>
<li><a href="/"><img alt="caption2" class="img-responsive" src="/images//wp-content/uploads/2014/05/2.jpg"/></a></li>
<li><a href="/"><img alt="caption" class="img-responsive" src="/images//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");
});

回答:

回答№1は0

「APIごとにCycle用のgotoコマンドがあります。これをホバーイベントハンドラのマウスアウト部分に追加しました。

$(".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");
});