jquery carousel défilement automatique avec le texte et l'image

Question

J'utilise le carrousel de jquery et j'ai l'image tournant automatiquement ici (http://jsbin.com/unoce/2), de sorte que le problème que je rencontre est le contenu sur la gauche n'est pas automatique de rotation "avec" l'image et la sélection de la flèche ne sont pas non plus. Cela ne fonctionne que lorsque je clique sur le contenu à gauche, puis que l'image sur la droite et la flèche se déplacent correctement ensemble.

Est-ce que quelqu'un peut fournir un support pour que le texte et la flèche puissent tourner automatiquement avec l'image?

Ce code ci-dessous ne ferait que faire pivoter l'image et rien d'autre ...

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

Voici une démonstration et vous pouvez modifier cette démo aussi: http://jsbin.com/unoce/2

Merci,

Evan

Answer 1

Jetez un oeil à ceci:

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

• Vous utilisez une ancienne version de jQuery (1.3.2). Le courant est 1.4.2, donc je l'ai changé dans le jsBin pour utiliser la version hébergée de Google de jQuery.

• Cela ne faisait pas partie du problème, mais j'ai consolidé du code. Vous avez eu plusieurs appels au $(document).ready(). Ce n'est pas mauvais, mais ce n'est pas non plus nécessaire. J'ai consolidé le code dans un appel ready().

• Vous attribuez 2 gestionnaires de clic. Encore une fois, c'est bien, mais inutile. J'ai mis le code des deux dans le rappel pour la propriété initCallback. Le initCallback ne reçoit qu'une seule fois, au début. C'est pourquoi la classe current n'était pas mise à jour lorsqu'elle était mise à jour automatiquement.

jCousous a beaucoup d'autres options de rappel. L'un s'appelle itemVisibleInCallback. Il faut en fait un objet qui peut prendre deux 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 
} 

C'est là que je pris soin d'enlever et ajouter la classe current.

Ces callbacks peuvent avoir quatre paramètres: carrousel, point, IDX, état

je devais utiliser le paramètre idx pour désigner l'élément approprié sous #features-nav car le paramètre item semble se référer à l'élément étant défilée.

Quoi qu'il en soit, espérons que cela aide.