Update styles of custom navigation links to slides?
Closed this issue · 2 comments
austinsamsel commented
Using custom navigation links, how do I update the active links css style based on the current active slide?
Or to say it another way, I'd like when a slide is active for its corresponding custom text link to be highlighted, whether I clicked on that link, or if I clicked on a next button.
example:
link1 link2 [link3]
[slide 3 active]
I see that something similar is done with the data-pagination. However, I'd like to have custom text in the pagination.
i-like-robots commented
You can provide a callback function for the oncomplete
option to highlight your links, E.G.:
var $links = $("#my-custom-pagination").find(".pagination-link");
function onCompleteCallback(current) {
$links.removeClass("is-highlighted").eq(current).addClass("is-highlighted");
}
To make your links change the slide you can use the .to()
method, E.G.:
var slideshow = $("#my-slideshow-instance").data("slides");
$links.on("click", function(e) {
slideshow.to( $links.index(e.target) );
});
austinsamsel commented
Awesome. Thank you.