jQuery -Cycle2 插件仅更改锚点上的幻灯片答案

【问题标题】：jQuery -Cycle2 plugin to change slides on anchor onlyjQuery -Cycle2 插件仅更改锚点上的幻灯片
【发布时间】：2014-10-10 21:30:20
【问题描述】：

我正在使用 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/

【问题讨论】：

标签： jquery jquery-cycle jquery-cycle2

【解决方案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

【讨论】：

甜蜜！聪明的思考。