Diaporama de carrousel Bootstrap multiple

Comment ajouter le curseur de diaporama de plusieurs carrousels Bootstrap sur une seule page ou une seule page ?

Dans ce didacticiel, nous fournissons un exemple de code source fonctionnel. Tout d'abord, téléchargez l'exemple de code à l'aide du bouton Télécharger le code en bas de la page.

L'ajout et la création de plusieurs curseurs de carrousel d'amorçage sur la page sont si faciles et simples.

Alors, commençons par l'exemple de code.

Une fois le téléchargement du code source terminé, vous obtiendrez un fichier zip "multiple-bootstrap-carousels.zip". Extrayez le fichier zip n'importe où dans le système informatique local.

Après l'extraction, vous trouvez un répertoire nommé "multiple-bootstrap-carousels", dans ce répertoire, vous obtiendrez les actifs suivants :

1. Annuaire CSS
2. Répertoire des polices
3. Répertoire d'images
4. Annuaire JS
5. Annuaire CSS
6. Fichier HTML – multiple-bootstrap-carousels.html

Quelles sont ces attestations ?

Ces actifs sont nécessaires pour créer un bootstrap à plusieurs curseurs de carrousel.

• Le répertoire CSS contient un fichier "bootstrap.min.css" qui est utilisé pour concevoir des pages HTML réactives.
• Le répertoire des polices est utilisé par bootstrap CSS pour générer les différentes icônes graphiques construites. Le contrôle de navigation de la flèche du curseur du carrousel est également généré par cela. Vous pouvez vérifier ici.
• Le répertoire Images contient toutes les images que nous utiliserons dans les diapositives du curseur du carrousel.
• Le répertoire JS contient 2 fichiers js "jquery.min.js" et "bootstrap.min.js". un fichier jquery.min.js est une bibliothèque JavaScript dans le but d'utiliser JavaScript sur les sites Web. un fichier bootstrap.min.js est un fichier de bibliothèque bootstrap framework js qui est utilisé pour créer des carrousels bootstrap, des formulaires de modèles, des info-bulles, des onglets, etc. Le fichier bootstrap.min.js dépend du fichier jquery.min.js, vous devez charger avant d'utiliser bootstrap js. Vous pouvez en savoir plus sur le fichier de bibliothèque bootstrap js ici.
• Le fichier HTML (multiple-bootstrap-carousels.html) contient toutes les parties de conception et de code de plusieurs curseurs de carrousel.

apprenons-en plus sur le fichier multiple-bootstrap-carousels.html.

Vous devez ouvrir le fichier HTML dans n'importe quel éditeur de code. Si vous n'avez pas d'outil d'éditeur de code installé sur l'ordinateur, voici quelques outils d'éditeur de code payants, téléchargez et installez n'importe quel outil d'éditeur de code :

Dans la section Head, nous avons chargé tous les fichiers CSS et js requis et quatre codes JS de carrousel comme ci-dessous :

Code

 <tête>
 <title>Exemple de diaporama de carrousel bootstrap multiple</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 
 <!-- bibliothèque css bootstrap -->
 <link rel="stylesheet" href="css/bootstrap.min.css">
 
 <!-- dernière bibliothèque jQuery (chargez d'abord cette bibliothèque) -->
 <script src="js/jquery.min.js"></script>
 
 <!-- bibliothèque bootstrap js -->
 <script src="js/bootstrap.min.js"></script>
 
 <!-- carrousel personnalisant le code css -->
 <style>
 .carrousel {
 /* vous pouvez ajouter ici la personnalisation du css comme la largeur de la hauteur du curseur */
 }
 </style>
 
 <!-- code js du carrousel -->
 <script>

 /* premier diaporama carrousel */
 $('#carrousel-1').carrousel({
      // Délai d'attente entre les cycles de glissement, Si faux, pas de cycle
      intervalle : 500,

      // Interrompt la diapositive à l'entrée de la souris et reprend à la sortie de la souris.
      pause : "survoler",

      // Indique si le carrousel doit effectuer un cycle continu ou s'arrêter brutalement.
      enveloppe : vrai,

      // Indique si le carrousel doit réagir aux événements du clavier.
      clavier : vrai
 });
 
 
 /* deuxième diaporama du carrousel */
 $('#carrousel-2').carrousel({
      intervalle : 1000,
      enveloppe : vrai,
      clavier : vrai
 });
 
 
 /* diaporama du troisième carrousel */
 $('#carrousel-3').carrousel({
     intervalle : 2000,
     enveloppe : vrai,
     clavier : vrai
 });
 
 
 /* quatrième diaporama du carrousel */
 $('#carrousel-4').carrousel({
     intervalle : 3000,
     enveloppe : vrai,
     clavier : vrai
 });
 </script>
 </head>

Dans la section Corps, nous définissons le code HTML des deux carrousels. Maintenant, expliquant le fonctionnement du premier code de curseur. Nous avons divisé une classe de ligne div en deux colonnes en utilisant la classe col-md-6. Et dans la première colonne, nous avons ajouté le code HTML du premier curseur de carrousel comme ci-dessous.

 <div class="ligne">
 <!-------------- début de la première colonne -------------->
 <div class="col-md-6">
  <div class="jumbotron">
   <center><h3>Carrousel 1</h3></center>
   <!-------------- démarrage du premier diaporama du carrousel -------------->
   <div class="diapositive carrousel" data-ride="carrousel">
   <!-- diapositives puces -->
   <ol class="indicateurs-carrousel">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
   </ol>

   <!-- wrapper pour les diapositives -->
   <div class="carousel-inner" role="listbox">
    
    <!-- diapositives 1 -->
    <div class="élément actif">
     <img src="images/girl-1.jpg" alt="La Canée">
    </div>
 
    <!-- diapositives 2 -->
    <div class="item">
     <img src="images/girl-2.jpg" alt="La Canée">
    </div>
 
    <!-- diapositives 3 -->
    <div class="item">
     <img src="images/fille-3.jpg" alt="Fleur">
    </div>

   </div>

   <!-- flèches de contrôle des diapositives gauche et droite -->
   <a class="left carousel-control" href="#carousel-1" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Précédent</span>
   </a>
   <a class="right carousel-control" href="#carousel-1" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Suivant</span>
   </a>
  </div>
  <!-------------- fin du premier diaporama du carrousel -------------->
  </div>
 </div>
 <!-------------- fin de la première colonne -------------->
</row>

Il y a trois parties de curseur de carrousel dans le code HTML ci-dessus

• Puces de curseur
• Diapositives d'images
• Navigation par curseur

La section Slider Bullets est construite à l'aide de la balise de liste de commandes HTML. <ol> utilise une classe nommée carousel-indicators , qui est définie dans le fichier CSS bootstrap. Et chaque balise <li> a un attribut data-target="#carousel-1" où #carousel-1 est le même ID que nous utilisons dans le premier code js du carrousel dans le code d'exemple.

La section Slider Image Slides a une div avec un élément de classe . Dans chacune de ces div, nous avons ajouté une balise d'image pour charger l'image de la diapositive.

La navigation par curseur est utilisée pour naviguer dans les diapositives d'image vers la gauche ou vers la droite. Les flèches de navigation sont créées par des icônes graphiques bootstrap appelées Glyphicon . Les boutons de navigation sont enveloppés dans une balise d'ancrage <a> avec la fonction d'attribut de données du carrousel d'amorçage et avec la classe de contrôle du carrousel . Dans la balise <a> dans l'attribut href , nous avons ajouté le même ID ( #carousel-1 ) que nous avons ajouté précédemment dans la partie des puces du curseur. Cet ID est utilisé dans le code js du premier diaporama du carrousel pour activer la fonctionnalité du premier curseur dans le code HTML du premier curseur.

Dans notre deuxième code de curseur, nous avons attribué un autre ID #carousel-2 pour les trois parties du code de curseur, comme dans le code js du deuxième curseur, les puces du deuxième curseur et le code HTML de navigation.

Espoir! vous trouvez que le tutoriel et l'exemple de code sont descriptifs et fonctionnent pour vous. Nous avons commenté chaque section de code dans l'exemple, afin que vous puissiez comprendre facilement chaque code.

Les gars, si vous avez une suggestion concernant la langue du didacticiel et le code d'exemple téléchargeable, veuillez nous écrire à notre courrier. Notre adresse e-mail est awordpresslife{at}gmail{dot}com

Merci d'avoir lu, utilisé et soutenu ce tutoriel.

Trouvez les liens de références utiles ci-dessous que nous avons cherché à écrire ce tutoriel pour vous :