jQuery-Cycle2插件，只更改锚上的幻灯片

Question

Im使用Cycle2插件创建自定义引用列表。只有当单击带有锚点的链接时，才应激活切换幻灯片。现在，无论是否有锚，它都能工作（尝试单击"参考3无锚"或"参考4无锚"）。

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