jQuery -Cycle2插件只改變錨點上的幻燈片

Question

我使用Cycle2插件來創建自定義參考列表。切換幻燈片只有在單擊錨鏈接時才應激活。 現在它無論是否有錨都可以工作（點擊「Ref 3 without anchor」或「Ref 4 without anchor」）。

HTML：

<ul id="references-list" class="cycle-pager external"> 
    <li><a href="">Ref 1 with image</a></li> 
    <li><a href="">Ref 2 with image</a></li> 
    <li>Ref 3 without anchor</li> 
    <li>Ref 4 without anchor</li> 
    <li>Ref 5 should bring 3th slide</li> 
</ul> 
<div class="cycle-slideshow" 
    data-cycle-fx=scrollHorz 
    data-cycle-timeout=0 
    data-cycle-pager="#references-list" 
    data-cycle-pager-template=""> 
    <img src="http://malsup.github.io/images/p1.jpg"> 
    <img src="http://malsup.github.io/images/p2.jpg"> 
    <img src="http://malsup.github.io/images/p3.jpg"> 
    <img src="http://malsup.github.io/images/p4.jpg"> 
</div> 

的jsfiddle： http://jsfiddle.net/qz1vqkjy/1/

Answer 1

既然你不想在尋呼機的所有元素反應，我建議去除幻燈片中的尋呼機選項和創建您自己的尋呼機代碼。

繼使用data-屬性來定義（通過指數）

HTML

<li><a href="" data-img="0">Ref 1 with image</a></li> 

JS尋呼

$('#references-list a').click(function(e){ 
    e.preventDefault(); 
    $('.cycle-slideshow').cycle($(this).data('img')); 
}) 

DEMO

引用哪個圖像