jquery carousel auto scroll with text and image

Answer 1

Take a look at this:

http://jsbin.com/unoce/7/edit

• You're using an old version of jQuery (1.3.2). The current is 1.4.2, so I switched it in the jsBin to use Google's hosted version of jQuery.

• This wasn't part of the issue, but I consolidated some code. You had several calls to $(document).ready(). This isn't bad, but it isn't necessary either. I consolidated the code into one ready() call.

• You were assigning 2 click handlers. Again, this is fine, but unnecessary. I put the code from both into the callback for the initCallback property.

• The initCallback only gets called once, at the beginning. That is why the current class wasn't getting updated when it would auto update.

jCarousel has a lot of other callback options. One is called itemVisibleInCallback. It actually takes an object that can take two callbacks:

itemVisibleInCallback: {
      // This one is called before new item is displayed
  onBeforeAnimation: mycarousel_itemVisibleBefore,

      // This one is called after new item is displayed
  onAfterAnimation: mycarousel_itemVisibleAfter
}

That is where I took care of removing and adding the current class.

Those callbacks can have four parameters: carousel, item, idx, state

I had to use the idx parameter to refer to the proper item under #features-nav because the item parameter seemed to refer to the item being scrolled.

Anyway, hope this helps.