Easy-Micro


LOGICIEL Bootstrap
Carrousel Bootstrap

Carrousel Bootstrap

<!DOCTYPE html>
<html lang="fr">
<meta charset="utf-8"/>
<head>
<title>Carrousel Bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="css/monbootstrapamoi.css" rel="stylesheet"/>

<!-- Jquery doit absolument être appelé AVANT le fichier bootstrap.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="js/bootstrap.js"></script>
</head>
<body>

<!-- conteneur Bootstrap principal (pas de rapport avec le carrousel)-->
<div class="container">
<h1>Carrousel Bootstrap</h1>

<!-- Ci-dessous conteneur du carrousel
La classe carousel appel le carrousel
La classe slide ajoute une transition et un effet d'animation
L'attribut data-ride="carousel" permet un auto-play
La classe carousel-fade permet un effet de transition en fading (l'image disparaît au profit de la nouvelle)
-->


<!-- Conteneur du carrousel (avec ajout balise style) -->
<div id="Moncarrouselamoi" class="carousel slide carousel-fade" data-ride="carousel" style="width:80%;">

<!-- Indicateurs : Les trois petit traits -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>

<!-- Conteneur des trois images -->
<!-- La taille des 3 images peut être modifiée dans css/monbootstrapamoi.css -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/t3.jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Koala</h5>
<p>Paresseux australien</p>
</div>
</div>

<div class="carousel-item">
<img class="d-block w-100" src="images/t2.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Koala roux</h5>
<p>Paresseux australien roux</p>
</div>
</div>

<div class="carousel-item">
<img class="d-block w-100" src="images/t1.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Koala albinos</h5>
<p>Paresseux albinos</p>
</div>
</div>
</div>

<!-- Boutons de navigation du carrousel -->
<!-- Les deux classes ci-dessous (carousel-control-prev et carousel-control-next) peuvent être modifiées dans le fichier css/monbootstrapamoi.css-->
<a class="carousel-control-prev" href="#Moncarrouselamoi" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Précédent</span>
</a>
<a class="carousel-control-next" href="#Moncarrouselamoi" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Suivant</span>
</a>
</div>

</div>
</body>
</html>
Exemple issu de Getbootstrap.com


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Mercredi 27 mars 2019 - Semaine 13 - Saint Habib (Demain: Saint Gontran)
Aujourd'hui, c'est l'anniversaire de Kad Merad (1964-55 ans), comédien et humoriste français (2008: Bienvenue chez les Ch'tis, 2009: Le petit Nicolas...). Autre 27 mars: 2004 : mort à 96 ans de l'écrivain Robert Merle (né en 1908).
Haut de page Easy-Micro