Avoir 4 carousels utilisant jcarousel mais un seul s'affiche à la fois

Bonjour à tous,

Je vous soumets mon problème d'aujourd'hui.
J'ai besoin de faire défiler une liste de produits dans un carrousel. Pour cela j'utilise jcarousel. Jusque là, tout se passe bien.
Et j'ai également l'existence de 4 onglets qui vont chacun afficher un carrousel différent.
Donc au chargement de la page seul un des 4 carrousels est visible, les autres sont en display:none. Et au clic sur un autre onglet, on masque le premier et on affiche le second.
Et c'est là que se pose mon problème. Lorsque j'active un autre carrousel, il ne s'affiche pas correctement. Alors que si à la base je les mets tous en display:block, ils sont touts bons, les liens précédents et suivants fonctionnent indépendamment les uns des autres.

Je ne comprends pas que juste un style css puisse faire marcher ou bugguer ce script.

Quelqu'un a t'il déjà été confronté à ça?

Merci pour vos retours.

quand sont ils initialisés avec jquery ?

J'ai une classe .mycarousel sur mes <ul>
J'appelle les fichiers js juste avant la fermeture de la balise body

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
// Carousel diapo
function mycarousel_initCallback(carousel) {
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });
 
    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });
 
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
 
    $('.mycarousel-next').bind('click', function(e) {
        e.preventDefault();
        carousel.next();
        return false;
 
    });
 
    $('.mycarousel-prev').bind('click', function(e) {
        e.preventDefault();
        carousel.prev();
        return false;
    });
};
$(document).ready(function () {
$(".mycarousel").jcarousel({
        start:1,
        offset:1,
        auto: 10,
        wrap: 'circular',
        itemFallbackDimension : 100,
        scroll: 3,
        easing: 'easeInSine',
        animation: 500,
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
        itemFirstInCallback: {
            onAfterAnimation: mycarousel_itemFirstInCallback
        }
    });
    /*****************************
     * affichage des onglets et contenus
    *****************************/
    $("a.link_rub").live('click',function(e){ // ajout de l'evenement.
        e.preventDefault();
		var id_link = $(this).attr('id');
        $("a.link_rub").removeClass('on');
        $('#'+id_link).addClass('on');
		$('.content_prod_nati').css('display','none');
		$('#content_'+id_link).css('display','block');
	});
});
// Affichage des boutons prev/next
function mycarousel_itemFirstInCallback() {
    $('.mycarousel-prev').text('< PRECEDENT');
    $('.mycarousel-next').text('SUIVANT >');
};

pas sur que

Code:

$(".mycarousel").jcarousel({

s'applique sur un element en display none ?

L'élément en display none est la div parente

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
 
<div class="content_prod_nati" id="content_rub1" style="display:none;">
      <div class="action" style="display:block;"><a href="#" class="mycarousel-prev"></a><a href="#" class="mycarousel-next"></a></div>
            <ul id="mycarousel1" class="mycarousel jcarousel-skin-tango">
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod1.gif" alt="Prod 1" title="Prod 1" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 1 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod4.gif" alt="Prod 4" title="Prod 4" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 4 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod2.gif" alt="Prod 2" title="Prod 2" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 2 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod5.gif" alt="Prod 5" title="Prod 5" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 5 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod3.gif" alt="Prod 3" title="Prod 3" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 3 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod6.gif" alt="Prod 6" title="Prod 6" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 6 Page 1<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod1.gif" alt="Prod 1" title="Prod 1" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 1 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod4.gif" alt="Prod 4" title="Prod 4" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 4 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod2.gif" alt="Prod 2" title="Prod 2" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 2 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod5.gif" alt="Prod 5" title="Prod 5" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 5 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod3.gif" alt="Prod 3" title="Prod 3" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 3 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod6.gif" alt="Prod 6" title="Prod 6" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 6 Page 2<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod1.gif" alt="Prod 1" title="Prod 1" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 1 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod4.gif" alt="Prod 4" title="Prod 4" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 4 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod2.gif" alt="Prod 2" title="Prod 2" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 2 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod5.gif" alt="Prod 5" title="Prod 5" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 5 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="produit">
                        <a href=""><img src="/medias_natiloo/img/photo_prod3.gif" alt="Prod 3" title="Prod 3" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 3 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                    <div class="produit sous">
                        <a href=""><img src="/medias_natiloo/img/photo_prod6.gif" alt="Prod 6" title="Prod 6" /></a>
                        <div class="infos_prod">
                            <a class="title_prod" href="">Prod 6 Page 3<br />Rubrique 1</a><br />
                            <span class="price_prod">29.00&euro;</span><span class="reduction_prod">-50%</span>
                        </div>
                    </div>
                </li>
            </ul>
          </div>

Il y en a 4 en tout comme ceci

reinitialise le plugin juste après avoir modifié le display ?

ou modifie le display à none juste après avoir affecté le plugin ?

Ah oui je vois!!! Effectivement en lançant les 4 en même temps ils tournaient tous sans que je les vois.
Je refais l'initialisation au moment du clic sur l'onglet c'est ça?

Merci beaucoup!!