Conflit probable entre deux carousels

**lorentdups** · 18/04/2014, 19h00

Bonjour à tous !
je suis bloqué pour quelque chose qui doit être assez basique.... mais quand on est c... on est c... Smiley cligne
j'ai une page avec deux carousels qui fonctionne bien sauf pour le second carousel dont la partie texte ne se réactualise pas.
si je mets ce 2ème carousel dans une page html où il est tout seul, tout fonctionne bien.
voici le code :
je pense qu'il y a un conflit sur une div dans la partie jquery qui réactualise le texte...

Merci de votre aide !

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div id="main_area">
<div class="row hidden-phone" id="slider-thumbs">
<div>
<ul class="thumbnails"><li class="span2">
                       <a class="thumbnail" id="carousel-selector1-0">
                       <img src="templates/template1/vert/image_xs.jpg" />
                       </a>vert</li><li class="span2">
                       <a class="thumbnail" id="carousel-selector1-1">
                       <img src="templates/template1/gris-bleu/image_xs.jpg" />
                       </a>gris-bleu</li>
</ul></div></div>
<div class="span12" id="slider">
<div class="row">
<div class="span8" id="carousel-bounding-box">
<div id="myCarousel1" class="carousel slide">
<div class="carousel-inner">                                                       
<div class="item active" data-slide-number1="0">
                      <img src="templates/template1/vert/image_xl.jpg" />
                      </div>
                      <div class="item " data-slide-number1="1">
                      <img src="templates/template1/gris-bleu/image_xl.jpg" />
                      </div>
                  </div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel1" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel1" data-slide="next">›</a>
</div></div>
<div class="span4" id="carousel-text1"></div>
<div style="display: none;" id="slide-content1">                                                  
<div id="slide-content1-0">
                      <h2>Kit graphique n&deg;1</h2>
                      <p>Couleur : vert</p>
                      <p class="sub-text"><a href="#">Visiter le site de d&eacute;mo</a></p>
                   <div class="form-actions">
                   <form class="form-vertical" method="post" action="index.php?cat=compte&amp;cmd=admstyles">
                      <input type="hidden" id="id_m" name="id_m" value="16" >
                      <input type="hidden" id="ChoixTempl" name="ChoixTempl" value="1" >
                      <input type="hidden" id="ChoixCoul" name="ChoixCoul" value="vert" >                   
                      <button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>             
                 </form>
                   </div> 
                      </div><div id="slide-content1-1">
                      <h2>Kit graphique n&deg;1</h2>
                      <p>Couleur : gris-bleu</p>
                      <p class="sub-text"><a href="#">Visiter le site de d&eacute;mo</a></p>
                   <div class="form-actions">
                   <form class="form-vertical" method="post" action="index.php?cat=compte&amp;cmd=admstyles">
                      <input type="hidden" id="id_m" name="id_m" value="16" >
                      <input type="hidden" id="ChoixTempl" name="ChoixTempl" value="1" >
                      <input type="hidden" id="ChoixCoul" name="ChoixCoul" value="gris-bleu" >                   
                      <button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>             
                 </form>
                   </div> 
 
                      </div></div></div><hr>
<script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  jQuery(document).ready(function($) {
 
        $('#myCarousel1').carousel({
                interval: 0
        });
        $('#carousel-text1').html($('#slide-content1-0').html());
        //Handles the carousel thumbnails
        $('[id^=carousel-selector1-]').click( function(){
                var id_selector = $(this).attr("id");
                var id = id_selector.substr(id_selector.length -1);
                var id = parseInt(id);
                $('#myCarousel1').carousel(id);
        });
 
        // When the carousel slides, auto update the text
        $('#myCarousel1').on('slid', function (e) {
                var id = $('.item.active').data('slide-number1');
                $('#carousel-text1').html($('#slide-content1-'+id).html());
        });
 
 
 
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
</script>
 
 
 
 
</div></div>2
<div id="main_area">
<div class="row hidden-phone" id="slider-thumbs">
<div>
<ul class="thumbnails"><li class="span2">
                       <a class="thumbnail" id="carousel-selector2-0">
                       <img src="templates/template2/bleu-blanc/image_xs.jpg" />
                       </a>bleu-blanc</li><li class="span2">
                       <a class="thumbnail" id="carousel-selector2-1">
                       <img src="templates/template2/orange-gris/image_xs.jpg" />
                       </a>orange-gris</li></ul></div></div>
<div class="span12" id="slider">
<div class="row">
<div class="span8" id="carousel-bounding-box">
<div id="myCarousel2" class="carousel slide">
<div class="carousel-inner">                                                       
<div class="item active" data-slide-number2="0">
                      <img src="templates/template2/bleu-blanc/image_xl.jpg" />
                      </div><div class="item " data-slide-number2="1">
                      <img src="templates/template2/orange-gris/image_xl.jpg" />
                      </div></div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel2" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel2" data-slide="next">›</a>
</div></div>
<div class="span4" id="carousel-text2"></div>
<div style="display: none;" id="slide-content2">                                                  
<div id="slide-content2-0">
                      <h2>Kit graphique n&deg;2</h2>
                      <p>Couleur : bleu-blanc</p>
                      <p class="sub-text"><a href="#">Visiter le site de d&eacute;mo</a></p>
                   <div class="form-actions">
                   <form class="form-vertical" method="post" action="index.php?cat=compte&amp;cmd=admstyles">
                      <input type="hidden" id="id_m" name="id_m" value="16" >
                      <input type="hidden" id="ChoixTempl" name="ChoixTempl" value="2" >
                      <input type="hidden" id="ChoixCoul" name="ChoixCoul" value="bleu-blanc" >                   
                      <button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>             
                 </form>
                   </div> 
                      </div><div id="slide-content2-1">
                      <h2>Kit graphique n&deg;2</h2>
                      <p>Couleur : orange-gris</p>
                      <p class="sub-text"><a href="#">Visiter le site de d&eacute;mo</a></p>
                   <div class="form-actions">
                   <form class="form-vertical" method="post" action="index.php?cat=compte&amp;cmd=admstyles">
                      <input type="hidden" id="id_m" name="id_m" value="16" >
                      <input type="hidden" id="ChoixTempl" name="ChoixTempl" value="2" >
                      <input type="hidden" id="ChoixCoul" name="ChoixCoul" value="orange-gris" >                   
                      <button class="btn btn-primary" type="submit" name="post" value="new">Valider ce choix</button>             
                 </form>
                   </div> 
                      </div></div></div><hr>
<script>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  jQuery(document).ready(function($) {
 
        $('#myCarousel2').carousel({
                interval: 0
        });
        $('#carousel-text2').html($('#slide-content2-0').html());
        //Handles the carousel thumbnails
        $('[id^=carousel-selector2-]').click( function(){
                var id_selector = $(this).attr("id");
                var id = id_selector.substr(id_selector.length -1);
                var id = parseInt(id);
                $('#myCarousel2').carousel(id);
        });
 
        // When the carousel slides, auto update the text
        $('#myCarousel2').on('slid', function (e) {
                var id = $('.item.active').data('slide-number2');
                $('#carousel-text2').html($('#slide-content2-'+id).html());
        });
 
 
 
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
</script>
</div></div>

**Geoffrey74** · 20/04/2014, 23h17

Je vois des div avec des id similaire (main_area, slider, carousel-bounding-box) pense pas que se soit ça mais bon, un id est normalement unique...

Sinon, tout le code js est là ?

Conflit probable entre deux carousels

jQuery

Discussions similaires

Partager

Partager