[MUSIC]
La plupart des composants basés sur Javascript de Bootstrap nous fournissent un mécanisme
pour contrôler certaines des fonctionnalités de ces composants en écrivant du code JavaScript,
en particulier en écrivant du code utilisant la syntaxe jQuery.
Nous allons donc explorer cet exercice d'index en utilisant des
contrôles basés sur Javascript pour notre Carrousel que nous avons
inclus dans la page index.html dans l'exercice précédent.
Dans l'exercice précédent, nous avons introduit ce carrousel dans notre page index.html.
Ce que je voudrais faire dans cet exercice est d'introduire quelques
boutons de contrôle dans ce carrousel,
puis utiliser JavaScript pour pouvoir activer ces boutons.
Les boutons seraient utilisés pour mettre en pause et
jouer l'action glissante de ce carrousel.
Donc, en incluant le bouton dans notre carrousel ici,
nous pouvons cliquer sur un bouton pour arrêter l'action glissante du carrousel,
puis nous pouvons cliquer sur un autre bouton pour reprendre l'action glissante du carrousel. C'
est donc ce que nous pouvons explorer dans cet exercice.
Pour commencer cet exercice, nous allons aller à la page index.html.
Et juste après les commandes gauche et droite de notre Carrousel,
je vais introduire un div avec le groupe de boutons de classe.
Donc, cela va enfermer un groupe de boutons de deux boutons ici, puis avec un ID de,
CarouselButton et
fermer la div là.
Maintenant, à l'intérieur de ça, je vais ajouter deux boutons.
Alors laissez-moi ajouter un bouton avec la classe btn, btn-danger,
btn-small, et
un identifiant de carousel-pause.
Donc, cela va agir comme le bouton pause, ralentit le bouton là.
Et pour ce bouton, je vais introduire
une police comme une icône avec la fa de classe,
pause, et fermer la travée.
Donc, cela va introduire un bouton de pause dans le groupe de boutons Carrousel.
Je vais copier ceci et le coller à nouveau pour créer un autre bouton.
Ce deuxième bouton, j'appellerai btn btn-danger btn-sm, et
puis ce serait un jeu de caroussel.
Et la classe de span,
le bouton serait si elle joue ici.
Disons les changements et allons jeter un coup d'oeil sur la page Web. En
regardant les boutons tels qu'ils existent dans notre navigateur, vous pouvez voir que
ces deux boutons sont maintenant positionnés dans le coin gauche de mon carrousel.
Je voudrais repositionner ces boutons sur le bord droit, afin
qu'il ne provoque pas cet espace bleu vide sous l'image ici.
Donc, permettez-moi d'utiliser quelques propriétés CSS pour repositionner ces boutons
dans la colonne de droite du Carrousel.
Aller à ce fichier de démarrage de style CSS,
laissez-moi introduire du code CSS ici.
Donc, pour l'élément avec les ID CarouselButtons,
je le positionne sur le bord droit et le bas, 0 pixel ici.
Donc ces deux-là, puis la position est absolue.
Donc cela positionnera ces boutons dans le coin droit de mon carrousel.
Évidemment, le simple fait d'introduire les boutons dans le carrousel
ne servira à rien.
Maintenant, nous allons profiter des contrôles JavaScript fournis par
le Carrousel en écrivant un peu de code jQuery au
bas de la page index.html pour faire que ces boutons fassent leur travail.
Nous voulons pouvoir faire une pause et reprendre l'action glissante de mon carrousel.
Aller au bas de la page index.html, permettez-moi de présenter un script ici.
Donc, ce script devrait contenir du
code JavaScript écrit dans la syntaxe jQuery.
Donc, je vais dire,
$ (document) .ready (function), Et
cette fonction devrait contenir quelques
fonctions ici pour activer les boutons.
Donc je dirais, mycarrousel.
C' est l'ID du carrousel que nous sommes introduits,
donc nous dirions, carrousel,
Intervalle : 2000.
Donc, ce que cela fait, c'est qu'il fixe l'intervalle de glissement du Carrousel
à 2000 millisecondes ou 2 secondes.
Donc je fais un peu plus vite pour
que l'action glissante ait lieu dans le carrousel.
Continuez avec le code jQuery ici.
Je vais maintenant activer ce bouton de pause, donc je vais dire carousel-pause.
C' est donc l'identifiant que j'ai donné au bouton de pause.
C' est donc la raison de donner l'identifiant.
Je veux donc activer le bouton pause.
Donc, je dis quand l'utilisateur clique.
Ainsi, vous pouvez voir comment lire la syntaxe.
Donc, cela dit, pour le bouton carousel-pause,
si une action de clic est effectuée par l'utilisateur, alors exécutez
cette fonction particulière que je spécifie à l'intérieur de ce code ici.
Quelle est la fonction que je veux faire ?
Je veux pouvoir,
Pause le Carrousel.
On dirait donc, carrousel (« pause »).
Donc, maintenant, vous voyez comment vous avez utilisé les contrôles basés sur JQuery.
Les contrôles JavaScript qui sont donnés pour le composant Bootstrap Carrousel et
ont écrit du code pour pouvoir contrôler le Carrousel.
De même, je veux pouvoir activer le bouton de lecture.
Donc, quand on clique sur le bouton de lecture,
je veux que l'action glissante du Carrousel reprenne.
Donc, je vais simplement copier ce code, le coller là.
Et puis je dirais jeu de carrousel,
cliquez sur la fonction mon carrousel, puis la fonction dit carrousel ('cycle').
C' est ainsi que vous spécifiez que le Carrousel
devrait reprendre le glissement comme avant.
Donc celui-ci, cette fonction que nous attachons au bouton de lecture ici.
Donc, avec ces deux,
notre fonction est introduite à l'intérieur de cette fonction prête à l'emploi du document.
Vous êtes prêt pour que le Carrousel soit activé,
et les deux boutons soient en mesure de contrôler le comportement de notre Carrousel.
Alors montrons les changements, et allons jeter un oeil sur le comportement de notre carrousel.
Aller à notre page, vous voyez maintenant que votre carrousel se déplace très vite,
parce que j'ai réglé l'intervalle à 2 000 millisecondes ou 2 secondes.
Donc toutes les deux secondes, vous verrez l'action glissante du Carrousel.
C' est vraiment ennuyeux.
Alors laissez-moi faire une pause en cliquant sur le bouton pause.
Ainsi, lorsque vous cliquez sur le bouton pause, l'action de glissement de votre carrousel est interrompue.
Parce que lorsque vous cliquez sur le bouton pause, alors la fonction que nous avons
introduite dans le code JavaScript entre en action et
interrompt ensuite le mouvement du carrousel.
Maintenant, si vous voulez reprendre, le clic sur le bouton de lecture,
puis le Carrousel devrait reprendre son mouvement.
Ainsi, comme vous pouvez le voir, au moment où vous cliquez sur un bouton de lecture, le carrousel commence à bouger.
Maintenant, bien sûr, vous pouvez améliorer davantage la façon dont vous créez ces boutons et ainsi de suite,
mais c'est un moyen simple que nous pouvons introduire pour contrôler notre carrousel.
Cet exercice vous montre comment nous pouvons utiliser du code JavaScript
pour pouvoir contrôler nos composants Bootstrap Javascript.
C' est le bon moment pour faire un commentaire de
votre code avec le message Bootstrap jQuery.
[ MUSIQUE]