[Bootstrap] Auto Carousel

Hello,

Petit topic par rapport à deux soucis que je rencontre avec le carousel de Bootstrap.

Tout d'abord, je mets le code (J'ai poster en section JS, parce que je suppose que le problème est là-dessus, mais rien de sur, donc au besoin, merci de bouger le topic n_n)

Concernant la structure HTML :

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
<div class="container">
<div id="myCarousel" class="carousel slide"  data-ride="carousel">
<!-- Indicateurs -->
<ol class="carousel-indicators">
<li class="item1 car-dots active"></li>
<li class="item2 car-dots "></li>
<li class="item3 car-dots "></li>
<li class="item4 car-dots "></li>
<li class="item5 car-dots "></li>
<li class="item6 car-dots "></li>
<li class="item7 car-dots "></li>
</ol>
 
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
 
<div class="item active">
<img src="images/homepage_hts/Phrase_accroche.jpg" alt="" width="460" height="345">
</div>
<div class="item">
<img src="images/homepage_hts/SoliTudiant.jpg" alt="" width="460" height="345">
</div>
<div class="item">
<img src="images/homepage_hts/SoliFruits.jpg" alt="" width="460" height="345">
</div>
<div class="item">
<img src="images/homepage_hts/SolidArt.jpg" alt="" width="460" height="345">
</div>
<div class="item">
<img src="images/homepage_hts/SoliShop.jpg" alt="" width="460" height="345">
</div>
<div class="item">
<img src="images/homepage_hts/SoliStarter.jpg" alt="" width="460" height="345">
</div>
<div class="item">
<img src="images/homepage_hts/SoliBalsa.jpg" alt="" width="460" height="345">
</div>
 
<a class="left carousel-control" href="#myCarousel" role="button" style="background: none; border: none;">
<span class="fa fa-chevron-left" aria-hidden="true" style="font-size: 24px"></span>
<span class="sr-only"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" style="background: none; border: none;">
<span class="fa fa-chevron-right" aria-hidden="true" style="font-size: 24px"></span>
<span class="sr-only"></span>
</a>
</div>
</div>

Et le JS :

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
jQuery(document).ready(function(){
// Activate Carousel
jQuery("#myCarousel").carousel({
interval: 5000,
cycle: true
 
});
 
// Enable Carousel Indicators
jQuery(".item1").click(function(){
jQuery("#myCarousel").carousel(0);
});
jQuery(".item2").click(function(){
jQuery("#myCarousel").carousel(1);
});
jQuery(".item3").click(function(){
jQuery("#myCarousel").carousel(2);
});
jQuery(".item4").click(function(){
jQuery("#myCarousel").carousel(3);
});
jQuery(".item5").click(function(){
jQuery("#myCarousel").carousel(4);
});
jQuery(".item6").click(function(){
jQuery("#myCarousel").carousel(5);
});
jQuery(".item7").click(function(){
jQuery("#myCarousel").carousel(6);
});
 
// Enable Carousel Controls
jQuery(".left").click(function(){
jQuery("#myCarousel").carousel("prev");
});
jQuery(".right").click(function(){
jQuery("#myCarousel").carousel("next");
});
});

Je précise que je suis sous Joomla! et que ce code est donc inclut dans un module.

Les problèmes que je rencontre sont les suivants :
- Le carousel fait un cycle entier correctement, mais à la fin du second, il freeze et ne repart pas au début.
- Après la dernière image, le carousel disparaît puis réapparaît (Comme si on jouait avec un display: block / none)

Si quelqu'un à d'éventuelles idées... Je suis preneur !