Cet article apprend principalement le plug-in javascript - Carrousel. Sans plus tarder, allez simplement étudier. Le tutoriel complet peut être consulté: Tutoriel Bootstrap 3.0
Carrousel
Ce qui suit est un boîtier de carrousel fait par ce plug-in et les composants connexes.
<body> <div id = "Carousel-Example-Generic" Data-ride = "Carousel"> <! - Indicateurs -> <Ol> <li Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "0"> </li> <li Data-Target = "# CARUSEL-EXAMPE Data-Target = "# Carousel-Example-Generic" Data-Slide-to = "2"> </li> </l> <! - Wrapper pour les diapositives -> <div style = "Text-Align: Center"> <div> <Mg> / img> </div> <div> <mg> / img> </div> <v> <img> / img> href = "# Carousel-Example-Generic" Data-Slide = "PREV"> <span> </span> </a> <a href = "# carousel-example-générique" Data-Slide = "Next"> <pander> </span> </a> </ dip> <script src = "js / jQuery-2.0.3.min.js"> </ script> src = "js / bootstrap.min.js"> </ script> <script type = "text / javascript"> // $ ('. carrousel'). Carousel ('Next'); </cript> </ body>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, Bootstrap n'a pas l'intention d'utiliser des fonctions alternatives basées sur JQuery.
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é.
<div> <img> / img> <div> <h4> Première étiquette miniature </h4> <p> CRAS JUSTO ODIO, DAPIBUS AC FACILISIS IN, Egestas Eget Quam. Donec id elit non mi porta gravida à eget metus. Nullam id Dolor id nibh ultrices véhicula ut id elit. </p> </div> </div>
Ajoutez trois éléments, puis l'effet sera évalué.
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.
Utilisation 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.
Ajoutez-le dans le récipient de carrousel le plus externe
<div id = "Carousel-Example-Generic" Data-ride = "Carousel">
via javascript
Démarrez manuellement le composant du carrousel (ci-dessus, nous allumons automatiquement le composant de carrousel en utilisant la propriété de ride de données.):
$ ('. 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 = "".
méthode
$ (""). Carrousel (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'). Carrousel ({intervalle: 2000}).Carousel ('cycle') boucles chaque trame de gauche à droite.
.Carousel («pause») arrête le carrousel.
.Carousel (Numéro) positionne le carrousel vers le cadre spécifié (l'indice de trame commence par 0, similaire à un tableau).
.Carel ('prev') revient au cadre précédent.
.Carel ('Next') Accédez à la trame suivante.
événement
Le composant carrousel de Bootstrap expose deux événements pour l'écoute.
$ ('# Carousel-Example-Generic'). On ('Slide.bs.carel', fonction () {alert (1);})Cela lie les événements au composant Carousel, puis les exécute à l'exécution correspondante. Cela a été expliqué beaucoup dans les plug-ins JavaScript précédents, et les formulaires sont tous généraux, vous pouvez donc simplement les utiliser.
image
Ce sont plusieurs plug-ins de carrousels d'image plus pratiques, qui ont de très bons résultats. S'ils sont utilisés raisonnablement, ils ajouteront toujours des points à votre page. J'espère que cela sera utile à l'apprentissage de tous.
Si vous n'êtes pas satisfait, vous pouvez consulter ces articles pour une étude approfondie: l'éditeur de "Bootstrap Learning Tutorial" fait des progrès avec vous!
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher deux sujets passionnants:
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.