jquery carousel auto scroll with text and image

Question

I'm using the jquery carousel and I have the image auto rotating here ( http://jsbin.com/unoce/2), so the issue I'm having is the content on the left is not AUTO rotating "with" the image and the arrow selection is not either. It only works when I click the content on the left and then the image on the right along with the arrow move appropriately together.

Can someone provide support so I may get the text and the arrow to "auto" rotate with the image?

This code below would only rotate the image and nothing else...

jQuery(document).ready(function() {
  jQuery("#features").jcarousel({
    scroll: 1,
    auto:2,
    wrap: 'both',
    initCallback: mycarousel_initCallback,
    buttonNextHTML: null,
    buttonPrevHTML: null
  });
}); 

Here's a demo and you can edit this demo too: http://jsbin.com/unoce/2

Thank you,

Evan

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.