Bootstrap Carrousel-inner “autoplay”
Peut quelqu'un m'aider? Il y a quelques choses de mal ici, je sais. Pourquoi dois-je faire un lien bootstrap.min.js à la fin de l'en-tête et au bas de la page. J'ai essayé de l'aide de l'une à un moment, mais il ne marche pas. La prochaine chose est que je veux un carrousel à démarrer lorsque je charge la page et quand je clique sur les contrôleurs; pas seulement quand je clique sur les contrôleurs.
<head>
<title>The James Baldwin School</title>
<link href="Framework/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="Main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="navbar-wrapper">
<div class="container">
<div id="navtop" class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="navbar-brand" href="#">The James Baldwin School</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Parents <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Students <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Teachers <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div><!-- /container -->
</div><!-- /navbar wrapper -->
<!--- Javascript Bootstrap --->
<script src="Framework/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</header>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://1.bp.blogspot.com/-BUrT0CP-6nQ/U1prUuv6VjI/AAAAAAAAFbY/a6PUNgNhSWM/s1600/1500x500-New-York-Skyline-Twitter-Header0017.jpg" style="width:100%" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel</h1>
<p>Pictures slide with overlapping words</p>
<p><a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
</p>
</div>
</div>
</div>
<div class="item">
<img src="http://1.bp.blogspot.com/-jBZKbiHI_2U/U1pszgzFAbI/AAAAAAAAFcI/8xrxWuBse9o/s1600/1500x500-New-York-Skyline-Twitter-Header0024.jpg" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Each Slide can be different</h1>
<p>I just need some one to pick the pictures and words</p>
<p><a class="btn btn-large btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img src="http://mooxidesign.com/wp-content/uploads/2014/04/New-york-1500x500.jpg" class="img-responsive">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>This Site is fully responsive and adjusts to the size of the browser your using. Meaning that it looks great on smart-phones</p>
<p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<!-- Three columns of text below the carousel -->
<div id="about">
<div class="row">
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Brady Smith</h2>
<p>Principal Co-Director</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Josh Heisler</h2>
<p>Teacher Co-Director</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-md-4 text-center">
<img class="img-circle" src="http://placehold.it/140x140">
<h2>Christine Olsen</h2>
<p>Admissions</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div><!-- /.row -->
</div>
<!-- START THE FEATURETTES -->
<!-- /END THE FEATURETTES -->
<!-- FOOTER -->
<footer>
<p class="pull-right"><a href="#">Back to top</a></p>
<p>This site was created by Isaac Perez. · <a href="http://www.google.com">Check it out</a></p>
</footer>
</div><!-- /.container -->
</body>
<script src="Framework/js/bootstrap.min.js"></script>
<script src="Framework/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">//<![CDATA[
var $ = jQuery.noConflict(); $(document).ready(function() { $('#myCarousel').carousel({ interval: 3000, cycle: true }); });
//]]></script>
</html>
OriginalL'auteur xXDarksnakeXx | 2014-12-20
Vous devez vous connecter pour publier un commentaire.
Je viens de mettre en place un Violon contenant le carrousel de votre exemple, jQuery version 2.1.3, bootstrap.js et bootstrap.css comme des ressources externes et de votre script à initalize le carrousel
et il du travail elle commence quand la page se charge et les contrôleurs sont de travail, aussi.
Qu'il ne fonctionne pas pour vous peut être un problème de chargement de bootstrap avant de jQuery - jQuery doit être compris avant de bootstrap. Pour vérifier si c'est le cas, voir si il ya une erreur /de la console de message du genre "Erreur: Bootstrap, JavaScript nécessite jQuery". Aussi, vous êtes, y compris 2 différentes versions de jQuery - 1.11.1 et 2.1.3. Si pas nécessaire, par exemple pour certains plugins en s'appuyant sur une ancienne version jQuery, essayez juste de charger la dernière.
En outre, vous n'êtes pas de placer des balises de script entre la fermeture du corps et de balises html qui peuvent travailler, mais n'est pas valide - voir lien, le script entre les balises </body> et </html> pour plus de détails.
En tant que référence pour l'utilisation de différentes versions de jQuery dans le cas où ce serait vraiment nécessaire, vous pouvez vérifier http://api.jquery.com/jquery.noconflict/
OriginalL'auteur matthias_h
Vous pourriez le faire par le biais de l'HTML avec le
data-interval
tag.L'insérer dans
<div id="myCarousel" class="carousel slide">
de sorte qu'il ressemble à ceci:La valeur de
3000
peut être ajusté à un nombre plus élevé de réduction de la vitesse et un nombre inférieur à l'augmentation de la vitesse.interval
entre chaque diapositive. Semble comme il n'y a aucun moyen de le faire sansjavascript
.Si cela ne répond pas à la question - merci pour votre réponse car je ne savait pas que. Agréable d'apprendre de nouvelles choses tous les jours.
OriginalL'auteur tonyynot
Ajouter l'attribut personnalisé
data-ride="carousel"
dans le contenant carrousel div.Vous pouvez éventuellement ajouter
data-interval="5000"
de changer le curseur modifier la durée en millisecondes.OriginalL'auteur AppLogics Solutions Ltd.