Bootstrap 3 Carrousel Ne Fonctionne Pas
Mon carrousel de Bootstrap ne pas afficher mes images ou de réagir à des contrôles.
C'est mon code 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 pas d'erreurs dans la console Chromée et le code est à peu près exactement la même que celle du Bootstrap exemples.
C'est ce à quoi le site ressemble sur ma fin:
Peut-être parce que vous n'avez pas le jQuery document prêt code à la place: learn.jquery.com/using-jquery-core/document-ready
La version de Bootstrap utilisez-vous? 2.3.2 ou 3.0?
Je suis avec Bootstrap 3.0
Et où avez-vous le css?
L'exemple sur le Bootstrap site. getbootstrap.com/examples/carousel
La version de Bootstrap utilisez-vous? 2.3.2 ou 3.0?
Je suis avec Bootstrap 3.0
Et où avez-vous le css?
L'exemple sur le Bootstrap site. getbootstrap.com/examples/carousel
OriginalL'auteur Liam Potter | 2013-12-17
Vous devez vous connecter pour publier un commentaire.
Il y a juste deux petites choses ici.
Le premier est le suivant carrousel indicateur d'éléments de la liste:
Vous avez besoin pour passer le
data-targetattribut un sélecteur de ce qui signifie que l'identité doit être préfixé avec#. Alors les modifier à la suivante:Deuxièmement, vous avez besoin pour donner le manège est un point de départ donc à la fois le carrousel indicateur articles et le manège intérieur les articles doivent avoir un
activeclasse. Comme ceci:Travail de Démonstration dans le Violon
très utile violon
appliquer spécifiquement au code postal de la poste si vous avez publier jsfiddle lien!!!! @KyleMit
OriginalL'auteur KyleMit
Voici les changements que vous devez faire
il suffit de remplacer le carrousel des div avec le code ci-dessous
Vous avez raté le '#' pour les données-cible et d'ajouter classe active pour le premier élément
OriginalL'auteur Adarsh Gowda K R
Bien, Bootstrap Carrousel a différents paramètres à contrôler.
c'est à dire
Intervalle: Spécifie le délai (en millisecondes) entre chaque diapositive.
pause: Suspend le carrousel de passer par la diapositive suivante lorsque le pointeur de la souris entre dans le manège, et reprend le glissement lorsque le pointeur de la souris quitte le carrousel.
wrap: Spécifie si le carrousel doit passer par 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...
Espérons que cela vous aidera 🙂
Remarque: C'est pour la poursuite de l'aide.. je veux dire, comment pouvez-vous personnaliser ou modifier le comportement par défaut une fois carrousel est chargé.
OriginalL'auteur Vikash Pandey
Pour moi, le manège n'était pas au travail de DreamWeaver CC fourni le code dans le "modèle de page", je suis à jouer avec. J'ai besoin d'ajouter les données-ride="carrousel" attribut du carrousel div pour il pour commencer à travailler. Grâce à Adarsh pour son extrait de code qui met en évidence le manque d'attribut.
OriginalL'auteur Paulepops