Créer Facilement un Carousel Bootstrap

Vous maîtriserez parfaitement la réalisation d’un carousel Bootstrap grâce à ce tutoriel.

Car je vous montre étape par étape les différents éléments à agencer pour la constitution du carousel.

Mais bien avant de commencer par écrire les lignes de codes, je vous explique ce qu’est un carousel et ce à quoi il sert.

Le composant UI carousel permet d’organiser de multiples contenus (images, textes) et de les faire tous occuper un seul et même espace.

C’est très utile pour une bonne navigation.

C’est un élément que l’on place souvent juste en dessous des barres de navigation sur les pages d’accueil pour faire la promotion des articles ou encore présenter d’importantes informations.

Maintenant place à la réalisation du carousel Bootstrap.

3 simples étapes pour réaliser un carousel Bootstrap

LA SUITE APRÈS CETTE PUBLICITÉ

L’image ci-dessus est la capture du résultat final du carousel Bootstrap que nous réaliserons dans ce tutoriel.

Notre carousel est un diaporama de différentes et sublimes trois fleurs.

Les images utilisées pour ce tutoriel ont été téléchargées sur pixabay, un des meilleurs sites de banques d’images gratuites.

Liens des images utilisées : marguerite, rose, tulips.

Maintenant, tu peux ouvrir ton éditeur de code, les choses sérieuses vont commencer.

Première étape de la constitution du carousel bootstrap

Pour la réalisation du carousel, il faut mettre en place un conteneur parent à l’aide de la balise div.

Cette balise div intégrera trois éléments indispensables pour un carousel Bootstrap :

• Le premier est la classe bootstrap .carousel, celle-ci spécifie au conteneur que l’on est en train de mettre en place un diaporama
• Le second est la classe .slide, elle ajoute un effet d’animation et de transition aux éléments constitutifs du carousel. Ainsi, un élément défile et laisse place à l’élément suivant. Vous pouvez l’omettre, le carousel fonctionnera mais vous n’aurez pas cette animation.
• Le dernier et troisième élément est l’attribut data-ride qui prend pour valeur “carousel”. Il permet au carousel de commencer par s’animer dès le chargement de la page.

<div class="carousel slide" data-ride="carousel">
	
</div>

Deuxième étape de la constitution du carousel bootstrap

La deuxième étape consiste à intégrer au sein du conteneur parent, le bloc récipiendaire des différents éléments constitutifs du carousel.

Ce bloc récipiendaire se réalise à l’aide d’une balise div qui incorpore la classe .carrousel-inner.

<div class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
		
	</div>
</div>

Troisième et dernière étape

Cette étape consiste à intégrer les contenus du carousel.

Dans notre exemple, les contenus à intégrer sont les images listées ci-haut.

Il faut au prime abord adapter les images aux différents appareils, c’est-à-dire les rendre responsives en leur attribuant la classe .img-fluid.

Ensuite, placer chaque image au sein d’une div qui portera la classe carousel-item.

Et finalement les intégrer tous au sein du bloc mis en place au niveau de la deuxième étape.

<div class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
	    <div class="carousel-item">
	      <img class="img-fluid" src="img/tulips.jpg" alt="Premier slide">
	    </div>
	    <div class="carousel-item">
	        <img class="img-fluid" src="img/rose.jpg" alt="Second slide">
	    </div>
	    <div class="carousel-item">
	      <img class="img-fluid" src="img/marguerite.jpg" alt="Troisième slide">
	    </div>
	</div>
</div>

Il manque un petit truc.

Si nous nous arrêtons là, aucune image ne s’affichera et nous n’aurons aucun diaporama.

Il nous faut activer l’un des contenus pour le bon fonctionnement du carousel, donc nous allons ajouter la classe .active à l’une des div contenant les images.

Voici le code complet

<div class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
	    <div class="carousel-item" class="active">
	      <img class="img-fluid" src="img/tulips.jpg" alt="Premier slide">
	    </div>
	    <div class="carousel-item">
	        <img class="img-fluid" src="img/rose.jpg" alt="Second slide">
	    </div>
	    <div class="carousel-item">
	      <img class="img-fluid" src="img/marguerite.jpg" alt="Troisième slide">
	    </div>
	</div>
</div>

Offrez les commandes du carousel au visiteur

Nous avons réalisé notre carousel, mais s’arrêter là ne sera pas convenable pour l’expérience utilisateur.

Les visiteurs sur un site veulent obtenir l’information qu’ils désirent sans perte de temps.

Du coup, il est important de permettre aux visiteurs d’avoir le contrôle sur les diapositives plutôt que d’être patient et attendre que les diapositives défilent elles-mêmes l’une à la suite de l’autre.

Cette section va nous permettre de voir comment intégrer des commandes de contrôle sur un carousel bootstrap.

Ces commandes de contrôle sont deux petites icônes qui permettent de défiler les contenus du carousel soit à gauche ou à droite.

Voici les étapes de réalisation des commandes de contrôle :

• La première est de définir un identifiant pour le bloc principal du carousel. Pour notre exemple, nous allons choisir l’identifiant ‘’carouselBootstrap ‘’

<div id="carouselBootstrap" class="carousel slide" data-ride="carousel">
   .....
</div>

• La seconde étape est de constituer les icônes servant de commande de contrôle et les intégrer dans le carousel. Pour la constitution des icônes, il faut intégrer une balise span au sein d’une balise d’ancre.

La balise span de l’icône permettant de défiler les contenus vers la gauche portera la classe .carousel-control-prev-icon, et l’ancre qui l’incorpore portera la classe .carousel-control-prev.

La balise span de l’autre icône portera la classe .carousel-control-next-icon et son ancre la classe .carousel-control-next.

• Maintenant, il va falloir attribuer pour valeur aux href des ancres, dièse (#) suivi de l’identifiant du bloc principal du carousel ‘’caouselBootstrap’’, et enfin intégrer l’attribut data-slide dans les ancres, celui de la commande défilant les contenus vers la gauche aura pour valeur “prev” et l’autre “next”

<div id="carouselBootstrap" class="carousel slide" data-ride="carousel">
	<div class="carousel-inner">
	    <div class="carousel-item" class="active">
	      <img class="img-fluid" src="img/tulips.jpg" alt="Premier slide">
	    </div>
	    <div class="carousel-item">
	      <img class="img-fluid" src="img/rose.jpg" alt="Second slide">
	    </div>
	    <div class="carousel-item">
	      <img class="img-fluid" src="img/marguerite.jpg" alt="Troisième slide">
	    </div>
	</div>
    <!-- Les commandes de contrôle-->
    <a class="carousel-control-prev" href="#carouselBootstrap" data-slide="prev">
	    <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carouselBootstrap" data-slide="next">
	    <span class="carousel-control-next-icon"></span>
    </a>
</div>

Intégrer les indicateurs

LA SUITE APRÈS CETTE PUBLICITÉ

Les indicateurs permettent au visiteur de savoir le nombre de contenus présents dans le carousel. Pour les réaliser, il faut créer une balise liste contenant le même nombre de balise li que les contenus du carousel.

La balise liste portera la classe .carousel-indicators.

Ses éléments enfants li porteront chacun l’attribut data-target avec pour valeur un dièse suivi de l’identifiant du bloc principal du carousel “carouselBootstrap”.

Pour que ces indicateurs s’animent en même temps que les contenus du carousel, nous allons intégrer un autre attribut dans les balises li, l’attribut data-slide-to.

Le premier aura pour valeur “0”, le second “1” et le dernier “2”.

Nous allons activer l’indicateur au contenu du carousel activé en lui intégrant la classe .active.

Maintenant place au code dont nous venons de donner l’explication.

<div id="carouselBootstrap" class="carousel slide" data-ride="carousel">
	<!-- Les indicateurs-->
	<ol class="carousel-indicators">
	    <li data-target="#carouselBootstrap" data-slide-to="0" class="active"></li>
	    <li data-target="#carouselBootstrap" data-slide-to="1"></li>
	    <li data-target="#carouselBootstrap" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
	    <div class="carousel-item" class="active">
	      <img class="img-fluid" src="img/tulips.jpg" alt="Premier slide">
	    </div>
        <div class="carousel-item">
          <img class="img-fluid" src="img/rose.jpg" alt="Second slide">
        </div>
	    <div class="carousel-item">
	      <img class="img-fluid" src="img/marguerite.jpg" alt="Troisième slide">
	    </div>
	</div>
    <!-- Les commandes de contrôle-->
    <a class="carousel-control-prev" href="#carouselBootstrap" data-slide="prev">
	    <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carouselBootstrap" data-slide="next">
	    <span class="carousel-control-next-icon"></span>
    </a>
</div>

Donner plus d’informations au visiteur

Pourquoi pas une petite légende sur les images pour les visiteurs.

Elle permettra aux visiteurs d’en savoir plus sur les éléments que lui présente le carousel.

Voici comment intégrer une légende sur les images.

En dessous des images intégrées dans le carousel, nous allons placer une div qui va réunir le titre et le texte de ma légende. Cette div portera la classe “carousel-caption”

<div class="carousel-item">
  <img class="img-fluid" src="img/tulips.jpg" alt="Premier slide">
  <div class="carousel-caption">
    <h5>Fleur Rose</h5>
    <p>Photo Téléchargée sur Pixabay</p>
  </div>
</div>

Maintenant tous les éléments du puzzle sont réunis, voici le code complet de notre carousel bootstrap

<div id="carouselBootstrap" class="carousel slide" data-ride="carousel">
	<!-- Les indicateurs-->
	<ol class="carousel-indicators">
	    <li data-target="#carouselBootstrap" data-slide-to="0" class="active"></li>
	    <li data-target="#carouselBootstrap" data-slide-to="1"></li>
	    <li data-target="#carouselBootstrap" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
	    <div class="carousel-item" class="active">
	      <img class="img-fluid" src="img/tulips.jpg" alt="Premier slide">
		  <div class="carousel-caption">
		    <h5>Fleur Tulips</h5>
		    <p>Photo Téléchargée sur Pixabay</p>
		  </div>
	    </div>
        <div class="carousel-item">
          <img class="img-fluid" src="img/rose.jpg" alt="Second slide">
          <div class="carousel-caption">
		    <h5>Fleur Rose</h5>
		    <p>Photo Téléchargée sur Pixabay</p>
		  </div>
        </div>
	    <div class="carousel-item">
	      <img class="img-fluid" src="img/marguerite.jpg" alt="Troisième slide">
	      <div class="carousel-caption">
		    <h5>Fleur Marguerite</h5>
		    <p>Photo Téléchargée sur Pixabay</p>
		  </div>
	    </div>
	</div>
    <!-- Les commandes de contrôle-->
    <a class="carousel-control-prev" href="#carouselBootstrap" data-slide="prev">
	    <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#carouselBootstrap" data-slide="next">
	    <span class="carousel-control-next-icon"></span>
    </a>
</div>

Autres tutoriels disponibles sur le blog

• Créer un accordéon avec Bootstrap
• Réaliser une barre de navigation avec Bootstrap
• Maîtriser le système de grille de Bootstrap

Conclusion

Lisez et exercez-vous jusqu’à ce que vous soyez en mesure de réaliser un carousel Bootstrap sans devoir faire appel à ce tutoriel.

Il y a possibilité de personnaliser ce carousel et d’avoir un carousel stylé qui n’a rien avoir avec le carousel de base de Bootstrap.

Commandes de contrôles personnalisées, les indicateurs adaptés à son propre goût ou encore une touche particulière apportée à la légende peuvent vous donner un résultat hors du commun.

Si vous désirez un autre tutoriel montrant des exemples de personnalisation du carousel, manifestez-vous dans les commentaires.