Le plug-in carrousel bootstrap est un moyen flexible et réactif d'ajouter des curseurs à votre site. En plus de cela, le contenu est suffisamment flexible pour être une image, un cadre intégré, une vidéo ou tout autre type de contenu que vous souhaitez placer.
Si vous souhaitez référencer la fonctionnalité du plugin séparément, vous devez référencer Carousel.js. Ou, comme mentionné dans le chapitre Bootstrap Plugin Présentation , vous pouvez vous référer à bootstrap.js ou versions compressées de bootstrap.min.js.
1. Exemple
Vous trouverez ci-dessous une simple diapositive qui montre un composant commun d'un élément de boucle à l'aide du pluroussel bootstrap. Pour implémenter Carousel, il vous suffit d'ajouter le code avec cette marque. Il n'est pas nécessaire d'utiliser des attributs de données, juste un développement simple basé sur la classe.
<! Doctype html> <html> <ada head> <itle> instance bootstrap - fiche du carrousel simple </taptère> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jQuery.min.js"> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <div id = "mycarel"> <! - Carousel Indicator -> <Ol> <li data-target = "# mycarel" data-slide-to = "0"> </li> <li data-target = "# mycarouls" Data-Target = "# MyCaRousel" Data-Slide-to = "2"> </li> </l> <! - Project de Carousel -> <div> <img src = "/ media / uploads / 2014/07 / Slide1.png"> </div> <div> <img src = "/ media / uploads / 2014/07 / Slide2.png"> </ Div Télécharges / 2014/07 / Slide2. src = "/ media / uploads / 2014/07 / slide3.png"> </ div> </div> <! - Navigation du carousel -> <a href = "# mycarel" data-slide = "prev"> ‹<< / a> <a href = "# mycroousel" data-slide = "Next" >› </a>
Les résultats sont les suivants:
Plugin de carrousel simple
2. Titre facultatif
Vous pouvez ajouter un titre à la diapositive via l'élément .carel-caption dans le .Item. Il suffit de mettre n'importe quel HTML en option et il sera automatiquement aligné et formaté. L'exemple suivant le démontre:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - title de caroulsel plug-in </ title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jQuery.min.js"> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <div id = "mycarel"> <! - Carousel Indicator -> <Ol> <li data-target = "# mycarel" data-slide-to = "0"> </li> <li data-target = "# mycarouls" Data-Target = "# MyCaRousel" Data-Slide-to = "2"> </li> </l> <! - Project de Carousel -> <div> <img src = "/ Media / Uploads / 2014/07 / Slide1.png"> <div> Title 1 </div> </v> <v> <img src = "/ media / uploads / 2014/07 / Sine. <div> Title 2 </div> </div> <v> <img src = "/ media / uploads / 2014/07 / Slide3.png"> <div> Title 3 </div> </div> </ div> <! - Carousel Navigation -> <a href = "# mycarousesel" Data-Slide = "Ava data-slide = "next" >› </a> </div> </ body> </html>
Les résultats sont les suivants:
Titre du plugin de carrousel
3. Utilisation
Grâce à l'attribut de données: à l'aide d'attributs de données, il est facile de contrôler la position du carrousel.
La glisse de données de la propriété accepte le mot-clé PREV ou à côté de modifier la position de la diapositive par rapport à la position actuelle.
Utilisez la diapositive de données à un index glissant brut jusqu'au fond du lit de carrousel. Data-Slide-to = "2" déplacera le curseur vers un index spécifique, et l'index compte à partir de 0.
La propriété Data-Ride = "Carrousel" est utilisée pour marquer le carrousel qui démarre la lecture d'animation lorsque la page est chargée.
Via javascript: le carrousel peut être appelé manuellement via JavaScript, comme indiqué ci-dessous:
$ ('. Carousel'). Carousel ()
4. Options
Certaines options sont passées par les propriétés de données ou JavaScript. Le tableau suivant répertorie ces options:
V. Méthode
Voici quelques méthodes utiles dans les plug-ins de carrousel:
Vi. Exemple
L'exemple suivant démontre l'utilisation de la méthode:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - méthode du plug-in carrousel </tapt> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jQuery.min.js"> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <div id = "mycarel"> <! - Carousel Indicator -> <Ol> <li data-target = "# mycarel" data-slide-to = "0"> </li> <li data-target = "# mycarouls" Data-Target = "# MyCaRousel" Data-Slide-to = "2"> </li> </l> <! - Project de Carousel -> <div> <img src = "/ media / uploads / 2014/07 / Slide1.png"> </div> <div> <img src = "/ media / uploads / 2014/07 / Slide2.png"> </ Div Télécharges / 2014/07 / Slide2. src = "/ media / uploads / 2014/07 / slide3.png"> </div> </div> <! - Navigation du carousel -> <a href = "# mycarousel" data-slide = "prev"> ‹<< / a> <a href = "# mycaresel" Data-Slide = "Next" >› </a> <! Style = "Text-Align: Center;"> <Input Type = "Button" Value = "START"> <Input Type = "Button" Value = "Pause"> <Input Type = "Button" Value = "Précédent Slide"> <Input Type = "Button" Value = "Suivant Slide" </div> </div> <script> $ (function () {// Initialiser le carrousel $ (". start-slide"). cliquez (function () {$ ("# mycarel"). Carousel ('cycle');}); // stop carousel $ (". Pause-slide"). Click () {$ ("# # mycarousel"). }); // Stop Carousel $ (". $ (". Next-Slide"). Cliquez sur (fonction () {$ ("# MyCarel"). Carousel ('Next');}); $ ("# MyCarel"). Carousel (1);}); $ (". Slide-Three"). }); </cript> </ body> </html>Les résultats sont les suivants:
Méthode de plug-in carrousel
7. Événements
Le tableau suivant répertorie les événements à utiliser dans le plug-in Carrousel. Ces événements peuvent être utilisés comme crochets dans les fonctions.
Exemple
L'exemple suivant démontre l'utilisation des événements:
<! Doctype html> <html> <éad- head> <itle> instance bootstrap - événement de plug-in carrousel </title> <link href = "/ bootstrap / css / bootstrap.min.css" rel = "Stylesheet"> <script src = "/ scripts / jQuery.min.js"> </ script> src = "/ bootstrap / js / bootstrap.min.js"> </ script> <body> <div id = "mycarel"> <! - Carousel Metric -> <Ol> <li data-target = "# mycarel" data-slide-to = "0"> </li> <li data-target = "# mycarousel" Data-Slide to = <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li> <li " Data-Target = "# MyCaRousel" Data-Slide-to = "2"> </li> </l> <! - Project de Carousel -> <div> <img src = "/ media / uploads / 2014/07 / Slide1.png"> </div> <div> <img src = "/ media / uploads / 2014/07 / Slide2.png"> </ Div Télécharges / 2014/07 / Slide2. src = "/ media / uploads / 2014/07 / slide3.png"> </div> </div> <! - Navigation du carousel -> <a href = "# mycaresel" data-slide = "prev"> ‹<< / a> <a href = "# mycarousesel" data-slide = "Next" >› </a> $ ('# MyCarel'). On ('Slide.bs.carel', function () {alert ("Flash l'événement immédiatement lorsque la méthode d'instance de diapositive est appelée.");}); }); </cript> </ body> </html>Les résultats sont les suivants:
Événements du plugin de carrousel
Selon le tutoriel ci-dessus, j'ai fait mon propre exemple:
Le plug-in carrousel joue plusieurs grandes images de la même taille dans l'ordre.
// Exemple de base. <div id = "MyCaRousel"> <Ol> <li data-target = "# myCaRousel" Data-Slide-to = "0"> </li> <li data-target = "# mycaresel" data-slide-to = "1"> </li> <li data-target = "# mycarousel" data-slide-to = "2"> </li> </ ol> <imgg src = "img / slide1.png"> </ div> <div> <img src = "img / slide2.png"> </ div> <div> <img src = "img / slide2.png"> </ div> <a href = "# mycarousel" data-slide = "prev"> ‹< / a> <a href = "# myCaRousel" data-slide = "next" >› </a> </div>
Explication de l'attribut de données:
1.Data-Slide accepte le mot-clé PREV ou à côté de modifier la position de la diapositive par rapport à la position actuelle;
2.Data-Slide-To Crée un indice de glissement original au bas du carrousel. Data-Slide-to = "2" déplacera le curseur vers un index spécifique, et l'index compte à partir de 0.
3.Data-ride = "Carousel" Attribut User Tag Le carrousel démarre la lecture d'animation lorsque la page est chargée.
Si vous l'appelez dans JavaScript, utilisez directement la méthode de la paire de valeurs clés et supprimez les données-;
// Définir les propriétés personnalisées
$ ('# MyCaRousel'). Carousel ({// Set Automatic Playback / 2 secondes Interval: 2000, // définir la pause de l'événement: 'hover', // ne joue qu'une seule fois enveloppe: false,});Le plugin Carousel fournit également quelques méthodes, comme suit:
// cliquez sur le bouton pour exécuter $ ('bouton'). Sur ('cliquer', fonction () {// après avoir cliqué, $ ('# myCaRousel'). Carousel ('cycle'); // autre similaire});événement
$ ('# myCaRousel'). On ('Slide.bs.carel', function () {alert ('libre immédiatement lorsque le mode d'instance de diapositive est appelé');}); $ ('# MyCarel'). On ('slid.bs.carel', function () {alert ('libre lorsque le carrousel complète une diapositive');});Pour plus de contenu, veuillez vous référer à: Tutoriel d'apprentissage bootstrap
Ce qui précède concerne cet article. J'espère qu'il sera utile pour tout le monde d'apprendre le plug-in Bootstrap Carousel.