Bootstrap 3 Carrousel ne fonctionne pas
Mon carrousel de Bootstrap n'affichera pas mes images ni ne réagira aux commandes.
Voici mon HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Skates R Us</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
Skates R Us
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
<a href="index.html">Home</a>
</li>
<li>
<a href="contact.html">Contact / About</a>
</li>
<li>
<a href="shop.html">Shop</a>
</li>
<li>
<a href="new.html">New Products</a>
</li>
<li>
<a href="media.html">Media</a>
</li>
</ul>
</div>
</div>
</div>
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="carousel" data-slide-to="0"></li>
<li data-target="carousel" data-slide-to="1"></li>
<li data-target="carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="img/slide_1.png" alt="Slide 1">
</div>
<div class="item">
<img src="img/slide_2.png" alt="Slide 2">
</div>
<div class="item">
<img src="img/slide_3.png" alt="Slide 3">
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#carousel").carousel();
</script>
</body>
</html>
Mon CSS:
#carousel {
margin-top: 50px;
}
.carousel {
height: 500px;
margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item {
width: 100%;
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
@media (min-width: 768px) {
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
img {
background: red;
}
Il n'y a aucune erreur dans la console Chrome et le code est à peu près le même que celui des exemples Bootstrap.
Voici à quoi ressemble le site de mon côté: 
Il y a juste deux petites choses ici.
Le premier se trouve dans les éléments de liste d'indicateurs de carrousel suivants:
<li data-target="carousel" data-slide-to="0"></li>
Vous devez passer le data-target attribuer un sélecteur ce qui signifie que l'ID doit être précédé de #. Modifiez-les donc comme suit:
<li data-target="#carousel" data-slide-to="0"></li>
Deuxièmement, vous devez donner au carrousel un point de départ afin que les éléments indicateurs du carrousel et les éléments intérieurs du carrousel doivent avoir une classe active. Comme ça:
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<!-- Other Items -->
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://picsum.photos/1500/600?image=1" alt="Slide 1" />
</div>
<!-- Other Items -->
</div>
Démo de travail dans Fiddle
Voici les changements que vous devez faire
remplacez simplement le div du carrousel par le code ci-dessous
Vous avez manqué le '#' pour data-target et ajoutez la classe active pour le premier élément
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/slide_1.png" alt="Slide 1">
</div>
<div class="item">
<img src="img/slide_2.png" alt="Slide 2">
</div>
<div class="item">
<img src="img/slide_3.png" alt="Slide 3">
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Eh bien, Bootstrap Carousel a divers paramètres à contrôler.
c'est à dire.
Intervalle: Spécifie le délai (en millisecondes) entre chaque diapositive.
pause: Interrompt le carrousel de passer par la diapositive suivante lorsque le pointeur de la souris entre dans le carrousel et reprend le glissement lorsque le pointeur de la souris quitte le carrousel.
wrap: Spécifie si le carrousel doit parcourir toutes les diapositives en continu, ou s'arrêter à la dernière diapositive
Pour votre référence:
Pour plus de détails, veuillez cliquez ici ...
J'espère que ceci vous aidera :)
Remarque: C'est pour l'aide supplémentaire .. Je veux dire comment pouvez-vous personnaliser ou modifier le comportement par défaut une fois le carrousel chargé.
Récemment, j'aidais un ami à trouver pourquoi son carrousel ne fonctionnait pas. Les commandes ne fonctionneraient pas et les images n'étaient pas en transition. J'avais un échantillon de travail sur une page que j'avais utilisée et nous avons parcouru tout le code, y compris la vérification des éléments ci-dessus dans ce post. Nous avons collé le "bon" carrousel sur la même page et cela a toujours fonctionné. Maintenant, tous les fichiers css et bootstrap étaient les mêmes pour les deux. Le code était maintenant identique, donc tout ce que nous pouvions essayer était les images.
Nous avons donc remplacé les images par deux qui fonctionnaient dans mon échantillon. Ça a marché. Nous avons remplacé les deux images par les deux premières qui ne fonctionnaient pas à l'origine, et cela a fonctionné. Nous avons ajouté chaque image (tous les jpeg) une par une, et lorsque nous sommes arrivés à la septième image (sur 18) et que le carrousel a échoué. Bizarre. Nous avons supprimé cette image et avons continué à ajouter les images restantes jusqu'à ce qu'elles soient toutes ajoutées et que le carrousel fonctionne.
pour référence, nous utilisions jquery-3.3.1.slim.min.js et bootstrap/4.3.1/js/bootstrap.min.js sur ce site.
Je ne sais pas pourquoi une image provoquerait ou pourrait provoquer un dysfonctionnement d'un carrousel, mais c'est le cas. Je n'ai pas pu trouver de référence à cette cause ailleurs non plus, donc je poste ici pour la postérité dans l'espoir que cela puisse aider quelqu'un d'autre lorsque d'autres solutions échouent.
Carrousel de test avec un ensemble limité d'images "connues pour être bonnes".
Pour moi, le carrousel ne fonctionnait pas dans DreamWeaver CC fourni le code dans la page "modèle" avec laquelle je joue. J'avais besoin d'ajouter l'attribut data-ride = "carousel" au div carrousel pour qu'il commence à fonctionner. Merci à Adarsh pour son extrait de code qui a mis en évidence l'attribut manquant.