Question

I’m looking for some help to implent a timer for this script I’m linking to.

As it is now, it toggles different slides when hovering the list to the right, but I want the slider to automatically jump ahead to the next slide after a certain amount of time until it reaches the end and then goes back to the top.

The catch though is that it also needs to work as it is now, so that you can toggle via hovering and when you stop hovering it should remember the position and jump ahead to the next item.

I realize this is alot to ask for, but some pointer would be great, thanks alot!

DEMO: http://jsbin.com/acorah

Answer 1

Your code is taking a bit of a performance hit with that each() loop which I don’t think you need. You’re binding events inside the loop and you’re limiting your possibilities by declaring your actions inside the bind() scope. You want to be able to call events on any object and not only a single element; $('.cn_item') in your case.

The idea is to keep track of your current slide with a class, let’s say .cur.
Then you create an object where you declare all your methods. The main methods or actions are getCur() and goTo() and mostly everything else will use these. ie. next() is just a shortcut for goTo()

var actions = {
    getCur: function(){ return idx; },
    goTo: function(idx){
        // The simplest case
        $slides.hide().eq(idx).show();
    },
    next: function(){ this.goTo(this.getCur()+1); },
    prev: function(){ this.goTo(this.getCur()-1); }
    .
    .
    .
}

Now you can call actions on events by simply doing this:

$slides.click(function(){ actions.goTo($(this).index()); });
$next.click(function(){ actions.next(); });

And then you can setInterval() to add a timer.

setInterval(actions.next, 1000);

This tutorial might help. I basically cover everything involved in making a slider. I would change some things as of today, we learn new ways to code stuff everyday.