Réinitialisation ou rechargement de Jcarousel en cas de changement d'onglet

Question

J'ai créé deux curseurs jcarousel dans deux onglets différents en utilisant jquery Ui...

Lorsque je change la section de l'onglet, le curseur doit être réinitialisé (ou) rechargé et se déplace vers sa première image.

J'ai utilisé ce script.

jQuery(document).ready(function() {
  jQuery('#mycarousel').jcarousel();
  jQuery('#mycarousel2').jcarousel();
  $( "#tabs" ).tabs();
});

J'ai essayé ceci script je n'ai pas eu d'effet sur le code

<script type="text/javascript"> 
    var theModelCarousel = null; 

    function modelCarousel_initCallback(carousel) { 
        theModelCarousel = carousel; 

    }; 

    jQuery('#tabs-2').click(function() { 

         jQuery('#mycarousel').jcarousel({ 
            initCallback: modelCarousel_initCallback 

        });

    }); 

    function clearModelCarousel() { 
        theModelCarousel.reset(); 

    } 
</script> 

Comment puis-je réinitialiser le curseur si je passe à un autre onglet (sans rafraîchir la page).

Ici, j'ai fait un BIN pour une meilleure compréhension.

Answer 1

Vous pouvez essayer avec les options de rechargement de jcarousel.

.jcarousel('reload' [, options])

jCarousel API

$('.jcarousel').jcarousel('reload', {
    'animation': 'slow'
});

Answer 2

Consulter l'API

C'est un problème très simple

http://sorgalla.com/jcarousel/docs/reference/api.html

 .jcarousel('reload' [, options])

Answer 3

jQuery('#mycarousel').data('jcarousel').scroll(0);

Cela remettra votre carrousel en position de départ ;

ou si dans une fonction vous avez l'objet carrousel

carousel.scroll(0);

Answer 4

J'ai eu le même problème et .jcarousel('reload' [, options]) ou $('#mycarousel').jcarousel('scroll', 0); avaient un effet secondaire étrange.

('scroll', 0) fonctionnait juste de manière aléatoire car le jcarousel réordonne vos éléments.

('reload' [, options]) fonctionnait à première vue mais quand on cliquait sur le bouton de l'image suivante, elle glissait vers l'image voisine de la dernière que l'on avait vue. Et cela ne fonctionnait pas si vous utilisiez le bouton de l'image précédente en dernier.

Ce qui a fonctionné pour moi est de lier le jcarousel script à une galerie d'images chaque fois qu'il était ouvert et ensuite de détruire le jcarousel chaque fois qu'il était fermé :

pour supprimer jcarousel, utilisez :

$('.gallery').jcarousel('destroy') ;

Answer 5

  $('#tabs').on('click', '.ui-tabs-anchor', function() {
    $('#mycarousel').jcarousel('scroll', 0);
    $('#mycarousel2').jcarousel('scroll', 0);
  });

On pourrait peut-être utiliser la méthode de défilement pour localiser le premier élément du carrousel. http://jsbin.com/idabit/23/edit