默认情况下,flexslider导航为 1-2-3-4
。
我已经制作了一个显示默认导航的JSFIDDLE。如果您查看我的幻灯片,我添加了data-slideName
,我需要使用它而不是默认的<ol></ol>
导航。
从以前的测试中,我相信这是我需要工作的地方。(注意:我已经通过在标签中添加内容来弄清楚这一点。)
setupPaging: function () {
var u = (c.vars.controlNav === "thumbnails") ? "control-thumbs" : "control-paging",
s = 1,
v, r;
c.controlNavScaffold = a('<ol class="' + j + "control-nav " + j + u + '"></ol>');
if (c.pagingCount > 1) {
for (var t = 0; t < c.pagingCount; t++) {
r = c.slides.eq(t);
v = (c.vars.controlNav === "thumbnails") ? '<img src="' + r.attr("data-thumb") + '"/>' : "<a>" + s + "</a>";
if ("thumbnails" === c.vars.controlNav && true === c.vars.thumbCaptions) {
var w = r.attr("data-thumbcaption");
if ("" != w && undefined != w) {
v += '<span class="' + j + 'caption">' + w + "</span>"
}
}
}
c.controlNavScaffold.append("<li>" + v + "</li>");
s++
}
[...]
},
最后,我想要此导航:
<ul>
<li>Slide 1 Lorem Ipsum</li>
<li>Slide 2 Title</li>
<li>Slide 3 Fake Name</li>
<li>Slide 4</li>
</ul>
我确实意识到我需要更改<ol class="' + j + "control-nav " + j + u + '"></ol>
,但是我的关键问题是获得data-slideName
值。我将如何适应当前情况/需求?
请参阅有关数据功能的jQuery api:jQuery api。
只需循环穿过<ul>
,然后使用.data()
函数获取属性并修改您的<ol>
。
最好的问候