Last week when I was in the CSS-Tricks forums, somebody wanted to modify the functionality of Chris Coyier‘s anythingSlider. Not a huge change, he just wanted to make the slider advance to the next panel when you click “Go”. Made sense to me. By the time you click “Go”, you’re done looking at that panel and are ready for the next one. If it doesn’t advance until after whatever delay you’ve setup, it could be confusing.

Basically what we want to do is make the slider advance to the next panel when we click go, which is the same as advancing to the next panel after we click the start/stop button if the slider ends up playing. It sounds complicated, but it will make more sense when we look at the code.

base.$startStop.click(function(e){
base.startStop(!base.playing);
if(base.playing) base.goForward(true);
e.preventDefault();
});

What I’ve done is find the place where he sets up the Start/Stop button that I mentioned above. Since he’s already go something going on if the button is clicked I used that to add our line that says to advance one panel. It took me a second to figure out that we wanted to slider to be playing instead of paused. The reason for this is that we’re inside the click function, which means we’ve already clicked the start/stop button. This probably seems pretty obvious to most people, but I was coming at this from a different perspective I guess.

Anyway, this is what I’m using on this site now. I really like the functionality so far. It’s nice to see the slider actually advance when you click go instead of staying on the same slide for another couple of seconds.