Bootstrap est un cadre frontal pour le développement rapide d'applications Web et de sites Web. Bootstrap est basé sur HTML, CSS et JavaScript.
Cas
Ce qui suit est un boîtier de carrousel fait par ce plug-in et les composants connexes.
<div id = "Carousel-Example-Generic" Data-ride = "Carousel"> <! - Indicateurs -> <Ol> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "0"> </li> <li Data-Target = "# Caousesel-Example-Generic" Data-Slide-to = "1"> </li> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "2"> </li> </l> <! - Wrapper pour les diapositives -> <div> <div> <img src = "..."> <div> ... </ div> </div> ... </ div> <! data-slide = "prev"> <span> </span> </a> <a href = "# carousel-example-generic" data-slide = "next"> <span> </span> </a> </div>
Internet Explorer 8 & 9 ne prend pas en charge les effets d'animation de transition
Bootstrap implémente les effets d'animation basés sur CSS3, mais Internet Explorer 8 & 9 ne prend pas en charge ces propriétés CSS nécessaires. Par conséquent, les effets d'animation de transition seront perdus lors de l'utilisation des deux navigateurs. De plus, nous n'avons pas l'intention d'utiliser la mise en œuvre basée sur JQuery des fonctions alternatives.
Options facultatives
Dans n'importe quel .tem, vous pouvez ajouter une caption de carrousel à chaque diapositive. Vous pouvez également ajouter n'importe quel code HTML, qui sera automatiquement organisé et formaté.
900x500
<div> <img src = "..."> <div> <h3> ... </h3> <p> ... </p> </div> </div>
Problèmes d'accessibilité
Le composant du carrousel n'est pas compatible avec les normes d'accessibilité. Si une compatibilité est requise, envisagez d'autres options de présentation de diapositives.
usage
Via l'attribut de données
L'attribut de données peut facilement contrôler le positionnement du carrousel. La diapositive de données peut accepter les mots clés PREV ou suivant qui contrôlent la position de lecture. De plus, l'indice de diapositive commençant par 0 peut également être passé par la glissière de données.
L'attribut Data-Ride = "Carrousel" est utilisé pour marquer le composant de carrousel qui commence après le chargement de la page.
via javascript
Démarrez manuellement la composante du carrousel:
La copie de code est la suivante:
$ ('. Carousel'). Carousel ()
Options
Les options peuvent être transmises à travers les propriétés de données ou JavaScript. Pour les attributs de données, vous devez mettre le nom de l'option après les données, par exemple Data-Interval = "".
Type de nom La valeur par défaut décrit le temps d'attente pour le numéro d' intervalle 5000 Rotation de la diapositive. Si faux, le carrousel ne démarre pas automatiquement la boucle. Pause String "Volant" La souris reste dans la zone de diapositives et met en pause le carrousel, et la souris quitte le carrousel. Enveloppez Boolean vrai si le carrousel continue de boucler.
méthode
.Carousel (Options)
Initialisez le composant du carrousel, acceptez un paramètre d'option de type d'objet en option et démarrez la boucle de diapositive.
$ ('. Carousel'). Carousel ({interval: 2000}). Carousel ('cycle')Cycle chaque cadre de gauche à droite.
.Carousel («pause»)
Arrêtez le carrousel.
.Carousel (numéro)
Positionnez le carrousel vers le cadre spécifié (l'indice de trame commence par 0, similaire à un tableau).
.Carousel ('prev')
Retour à la trame précédente.
.Carousel («Next»)
Allez dans le cadre suivant.
événement
Le composant carrousel de Bootstrap expose deux événements pour l'écoute.
| Type d'événement | décrire |
|---|---|
| slide.bs.carousel | Cet événement commence immédiatement après l'appel de slide . |
| slid.bs.carel | Il est déclenché lorsque tous les diaporamas sont joués. |
$ ('# MyCaRousel'). On ('Slide.bs.carel', fonction () {// faire quelque chose…})Ce qui précède est l'explication détaillée du cas du carrousel bootstrap basé sur le plug-in JS introduit par l'éditeur. J'espère que cela peut vous aider!