i-like-robots/jQuery-Slideshow

Update styles of custom navigation links to slides?

Closed this issue · 2 comments

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.

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) );
});

Awesome. Thank you.