Question

I am currently using jQuery cycle to display featured projects. I currently have the next and prev buttons setup, I also have four rounded buttons in between. I would like them to function as both a link to the corresponding slide as well as add a class to the button who’s slide is currently active. I have the nav setup and the active class setup I just need the jQuery.

You can see the code at http://jjnold.com/dev in the main slider at the top.

I was thinking it’s probably something like this to assign the class but I’m not sure how to link to the corresponding slide and have them work together. Any help is greatly appreciated.

$('.featuredNavInt a').click(function()
{
  $('.featuredNavInt a').removeClass('active');
  $(this).addClass('active');
});

Answer 1

The cycle plugin supports a pager option for building your pager (i.e. the dots between the arrows). There’s a simple example in the second section of this:

http://jquery.malsup.com/cycle/int2.html

I think you’d be using the pagerAnchorBuilder option to provide a callback for building the individual pager elements so you could use your dots. There are several other pager options so you should be able to wire this up without messing around with adding or removing classes yourself.

There doesn’t appear to be a command for “go to slide N” so you’ll have to go through cycle’s built in pager support.

There are various other pager examples here:

http://jquery.malsup.com/cycle/more.html?v2.23