See the jquery api concerning the data functionality: jquery api.
Simply loop through the <ul>
then get the attributes with the .data()
function and modify your <ol>
.
Thats it :)
Best regards
Question
By default, the flexslider navigation is 1-2-3-4
.
I've made a jsFiddle showing the default navigation. If you look at my slides, I've added data-slideName
which I need to use instead of the default <ol></ol>
navigation.
From previous testing, I believe this is where I need to work in order to do so. (Note: I've figured this out by adding content inside the tag.)
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++
}
[...]
},
In the end, I want this for my navigation:
<ul>
<li>Slide 1 Lorem Ipsum</li>
<li>Slide 2 Title</li>
<li>Slide 3 Fake Name</li>
<li>Slide 4</li>
</ul>
I do realize for this I will need to change <ol class="' + j + "control-nav " + j + u + '"></ol>
, but my key problem is obtaining the data-slideName
values. How would I adapt this code to the current situation/need?
Solution
See the jquery api concerning the data functionality: jquery api.
Simply loop through the <ul>
then get the attributes with the .data()
function and modify your <ol>
.
Thats it :)
Best regards