Nous voulons créer un carousel avec Bootstrap qui est, en quelque sorte, une « extension » du HTML.
Pour réussir à faire cela, nous allons être obligés de mettre des liens en plus dans l’en-tête head de notre fichier html. Il vous faudra donc copier ce code plus le lien vers votre feuille de style, et, comme nous allons utiliser less qui est une extension CSS qui permet d’imbriquer des sélecteurs (par exemple), il vous faut aussi rajouter la 3ème ligne en plus .
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
La liaison de feuille de style est un peu différente avec less, au lieu de celle habituelle, il faudra la remplacer par celle-ci :
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Quasiment tout va se faire en HTML avec les attributs. Vous ne pouvez pas inventer ce code, il est très particulier et à moins que vous ne soyez expert en bootstrap, il ne faut pas modifier les attributs et leurs valeurs!!
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
Quelques explications ne feraient pas de mal je crois!!!
Toutes les classes que nous avons mises, sont toujours les mêmes pour tout le monde : elles sont universelles pour Bootstrap du moins. Au début, on donne un id au carousel et c’est cet id qui est repris pour les listes (#carousel) et il faut absolument qu’ils correspondent. Dans le div.carousel-inner, on met des le nombre d’items que l’on veut dans notre carousel avec la classe item et pour celui que l’on veut qui apparaisse en premier on rajoute un active devant. Enfin, la dernière partie est consacrée à la navigation du carousel avec les flèches (par exemple).
Passons maintenant à la partie CSS qui va être écrite en LESS. Cette partie est relativement simple, nous allons définir les dimensions, l’opacité et la couleur de notre carousel!!!
.carousel-fade {
.carousel-inner {
.item {
transition-property: opacity;
}
.item, .active.left, .active.right {
opacity: 0;
}
.active, .next.left, .prev.right {
opacity: 1;
}
.next, .prev, .active.left, .active.right {
left: 0;
transform: translate3d(0, 0, 0);
}
}
.carousel-control {
z-index: 2;
}
}
html, body, .carousel, .carousel-inner, .carousel-inner .item
{
height: 100%;
}
.item:nth-child(1)
{
background: #74C390;
}
.item:nth-child(2)
{
background: #51BCE8;
}
.item:nth-child(3)
{
background: #E46653;
}
SublimeCode 