1
00:00:00,000 --> 00:00:04,523
[MUSIC]

2
00:00:04,523 --> 00:00:10,934
La plupart des composants basés sur Javascript de Bootstrap nous fournissent un mécanisme

3
00:00:10,934 --> 00:00:17,070
pour contrôler certaines des fonctionnalités de ces composants en écrivant du code JavaScript,

4
00:00:17,070 --> 00:00:21,510
en particulier en écrivant du code utilisant la syntaxe jQuery.

5
00:00:21,510 --> 00:00:26,181
Nous allons donc explorer cet exercice d'index en utilisant des

6
00:00:26,181 --> 00:00:30,561
contrôles basés sur Javascript pour notre Carrousel que nous avons

7
00:00:30,561 --> 00:00:35,537
inclus dans la page index.html dans l'exercice précédent.

8
00:00:37,171 --> 00:00:42,810
Dans l'exercice précédent, nous avons introduit ce carrousel dans notre page index.html.

9
00:00:42,810 --> 00:00:47,260
Ce que je voudrais faire dans cet exercice est d'introduire quelques

10
00:00:47,260 --> 00:00:50,240
boutons de contrôle dans ce carrousel,

11
00:00:50,240 --> 00:00:54,920
puis utiliser JavaScript pour pouvoir activer ces boutons.

12
00:00:54,920 --> 00:00:57,850
Les boutons seraient utilisés pour mettre en pause et

13
00:00:57,850 --> 00:01:03,350
jouer l'action glissante de ce carrousel.

14
00:01:03,350 --> 00:01:08,410
Donc, en incluant le bouton dans notre carrousel ici,

15
00:01:08,410 --> 00:01:13,000
nous pouvons cliquer sur un bouton pour arrêter l'action glissante du carrousel,

16
00:01:13,000 --> 00:01:18,070
puis nous pouvons cliquer sur un autre bouton pour reprendre l'action glissante du carrousel. C'

17
00:01:18,070 --> 00:01:21,390
est donc ce que nous pouvons explorer dans cet exercice.

18
00:01:22,520 --> 00:01:26,920
Pour commencer cet exercice, nous allons aller à la page index.html.

19
00:01:26,920 --> 00:01:32,420
Et juste après les commandes gauche et droite de notre Carrousel,

20
00:01:32,420 --> 00:01:40,400
je vais introduire un div avec le groupe de boutons de classe.

21
00:01:40,400 --> 00:01:47,023
Donc, cela va enfermer un groupe de boutons de deux boutons ici, puis avec un ID de,

22
00:01:50,699 --> 00:01:54,224
CarouselButton et

23
00:01:54,224 --> 00:01:59,290
fermer la div là.

24
00:01:59,290 --> 00:02:03,530
Maintenant, à l'intérieur de ça, je vais ajouter deux boutons.

25
00:02:03,530 --> 00:02:12,385
Alors laissez-moi ajouter un bouton avec la classe btn, btn-danger,

26
00:02:12,385 --> 00:02:16,910
btn-small, et

27
00:02:16,910 --> 00:02:24,030
un identifiant de carousel-pause.

28
00:02:24,030 --> 00:02:30,970
Donc, cela va agir comme le bouton pause, ralentit le bouton là.

29
00:02:30,970 --> 00:02:36,600
Et pour ce bouton, je vais introduire

30
00:02:36,600 --> 00:02:41,201
une police comme une icône avec la fa de classe,

31
00:02:42,923 --> 00:02:49,410
pause, et fermer la travée.

32
00:02:49,410 --> 00:02:55,790
Donc, cela va introduire un bouton de pause dans le groupe de boutons Carrousel.

33
00:02:55,790 --> 00:03:04,450
Je vais copier ceci et le coller à nouveau pour créer un autre bouton.

34
00:03:04,450 --> 00:03:09,368
Ce deuxième bouton, j'appellerai btn btn-danger btn-sm, et

35
00:03:09,368 --> 00:03:12,259
puis ce serait un jeu de caroussel.

36
00:03:13,300 --> 00:03:17,580
Et la classe de span,

37
00:03:17,580 --> 00:03:21,660
le bouton serait si elle joue ici.

38
00:03:23,940 --> 00:03:27,965
Disons les changements et allons jeter un coup d'oeil sur la page Web. En

39
00:03:29,180 --> 00:03:34,850
regardant les boutons tels qu'ils existent dans notre navigateur, vous pouvez voir que

40
00:03:34,850 --> 00:03:39,940
ces deux boutons sont maintenant positionnés dans le coin gauche de mon carrousel.

41
00:03:40,970 --> 00:03:44,660
Je voudrais repositionner ces boutons sur le bord droit, afin

42
00:03:44,660 --> 00:03:51,700
qu'il ne provoque pas cet espace bleu vide sous l'image ici.

43
00:03:51,700 --> 00:03:56,410
Donc, permettez-moi d'utiliser quelques propriétés CSS pour repositionner ces boutons

44
00:03:56,410 --> 00:03:59,230
dans la colonne de droite du Carrousel.

45
00:04:00,760 --> 00:04:04,140
Aller à ce fichier de démarrage de style CSS,

46
00:04:04,140 --> 00:04:08,440
laissez-moi introduire du code CSS ici.

47
00:04:08,440 --> 00:04:14,166
Donc, pour l'élément avec les ID CarouselButtons,

48
00:04:14,166 --> 00:04:18,880
je le positionne sur le bord droit et le bas, 0 pixel ici.

49
00:04:18,880 --> 00:04:22,280
Donc ces deux-là, puis la position est absolue.

50
00:04:22,280 --> 00:04:28,300
Donc cela positionnera ces boutons dans le coin droit de mon carrousel.

51
00:04:29,710 --> 00:04:34,280
Évidemment, le simple fait d'introduire les boutons dans le carrousel

52
00:04:34,280 --> 00:04:35,420
ne servira à rien.

53
00:04:35,420 --> 00:04:40,330
Maintenant, nous allons profiter des contrôles JavaScript fournis par

54
00:04:40,330 --> 00:04:46,310
le Carrousel en écrivant un peu de code jQuery au

55
00:04:46,310 --> 00:04:52,204
bas de la page index.html pour faire que ces boutons fassent leur travail.

56
00:04:52,204 --> 00:04:57,950
Nous voulons pouvoir faire une pause et reprendre l'action glissante de mon carrousel.

57
00:04:58,970 --> 00:05:06,830
Aller au bas de la page index.html, permettez-moi de présenter un script ici.

58
00:05:06,830 --> 00:05:10,980
Donc, ce script devrait contenir du

59
00:05:10,980 --> 00:05:15,750
code JavaScript écrit dans la syntaxe jQuery.

60
00:05:15,750 --> 00:05:19,088
Donc, je vais dire,

61
00:05:19,088 --> 00:05:28,664
$ (document) .ready (function), Et

62
00:05:28,664 --> 00:05:33,814
cette fonction devrait contenir quelques

63
00:05:33,814 --> 00:05:39,320
fonctions ici pour activer les boutons.

64
00:05:39,320 --> 00:05:45,430
Donc je dirais, mycarrousel.

65
00:05:45,430 --> 00:05:50,427
C' est l'ID du carrousel que nous sommes introduits,

66
00:05:50,427 --> 00:05:53,099
donc nous dirions, carrousel,

67
00:05:56,960 --> 00:06:01,804
Intervalle : 2000.

68
00:06:01,804 --> 00:06:06,720
Donc, ce que cela fait, c'est qu'il fixe l'intervalle de glissement du Carrousel

69
00:06:06,720 --> 00:06:10,130
à 2000 millisecondes ou 2 secondes.

70
00:06:10,130 --> 00:06:12,890
Donc je fais un peu plus vite pour

71
00:06:12,890 --> 00:06:16,330
que l'action glissante ait lieu dans le carrousel.

72
00:06:16,330 --> 00:06:20,430
Continuez avec le code jQuery ici.

73
00:06:20,430 --> 00:06:26,835
Je vais maintenant activer ce bouton de pause, donc je vais dire carousel-pause.

74
00:06:26,835 --> 00:06:31,430
C' est donc l'identifiant que j'ai donné au bouton de pause.

75
00:06:31,430 --> 00:06:34,960
C' est donc la raison de donner l'identifiant.

76
00:06:34,960 --> 00:06:38,720
Je veux donc activer le bouton pause.

77
00:06:38,720 --> 00:06:40,980
Donc, je dis quand l'utilisateur clique.

78
00:06:40,980 --> 00:06:42,920
Ainsi, vous pouvez voir comment lire la syntaxe.

79
00:06:42,920 --> 00:06:47,470
Donc, cela dit, pour le bouton carousel-pause,

80
00:06:47,470 --> 00:06:53,510
si une action de clic est effectuée par l'utilisateur, alors exécutez

81
00:06:53,510 --> 00:07:01,000
cette fonction particulière que je spécifie à l'intérieur de ce code ici.

82
00:07:01,000 --> 00:07:03,140
Quelle est la fonction que je veux faire ?

83
00:07:03,140 --> 00:07:05,324
Je veux pouvoir,

84
00:07:09,144 --> 00:07:15,200
Pause le Carrousel.

85
00:07:15,200 --> 00:07:20,665
On dirait donc, carrousel (« pause »).

86
00:07:21,860 --> 00:07:29,884
Donc, maintenant, vous voyez comment vous avez utilisé les contrôles basés sur JQuery.

87
00:07:29,884 --> 00:07:36,020
Les contrôles JavaScript qui sont donnés pour le composant Bootstrap Carrousel et

88
00:07:36,020 --> 00:07:41,611
ont écrit du code pour pouvoir contrôler le Carrousel.

89
00:07:41,611 --> 00:07:46,060
De même, je veux pouvoir activer le bouton de lecture.

90
00:07:46,060 --> 00:07:48,410
Donc, quand on clique sur le bouton de lecture,

91
00:07:48,410 --> 00:07:52,380
je veux que l'action glissante du Carrousel reprenne.

92
00:07:52,380 --> 00:07:56,950
Donc, je vais simplement copier ce code, le coller là.

93
00:07:56,950 --> 00:08:00,720
Et puis je dirais jeu de carrousel,

94
00:08:00,720 --> 00:08:07,130
cliquez sur la fonction mon carrousel, puis la fonction dit carrousel ('cycle').

95
00:08:07,130 --> 00:08:12,477
C' est ainsi que vous spécifiez que le Carrousel

96
00:08:12,477 --> 00:08:16,850
devrait reprendre le glissement comme avant.

97
00:08:16,850 --> 00:08:21,620
Donc celui-ci, cette fonction que nous attachons au bouton de lecture ici.

98
00:08:21,620 --> 00:08:23,380
Donc, avec ces deux,

99
00:08:23,380 --> 00:08:28,800
notre fonction est introduite à l'intérieur de cette fonction prête à l'emploi du document.

100
00:08:28,800 --> 00:08:33,870
Vous êtes prêt pour que le Carrousel soit activé,

101
00:08:33,870 --> 00:08:38,690
et les deux boutons soient en mesure de contrôler le comportement de notre Carrousel.

102
00:08:38,690 --> 00:08:43,240
Alors montrons les changements, et allons jeter un oeil sur le comportement de notre carrousel.

103
00:08:44,570 --> 00:08:50,084
Aller à notre page, vous voyez maintenant que votre carrousel se déplace très vite,

104
00:08:50,084 --> 00:08:55,603
parce que j'ai réglé l'intervalle à 2 000 millisecondes ou 2 secondes.

105
00:08:55,603 --> 00:08:59,640
Donc toutes les deux secondes, vous verrez l'action glissante du Carrousel.

106
00:08:59,640 --> 00:09:01,380
C' est vraiment ennuyeux.

107
00:09:01,380 --> 00:09:05,410
Alors laissez-moi faire une pause en cliquant sur le bouton pause.

108
00:09:05,410 --> 00:09:11,080
Ainsi, lorsque vous cliquez sur le bouton pause, l'action de glissement de votre carrousel est interrompue.

109
00:09:11,080 --> 00:09:15,080
Parce que lorsque vous cliquez sur le bouton pause, alors la fonction que nous avons

110
00:09:16,820 --> 00:09:21,360
introduite dans le code JavaScript entre en action et

111
00:09:21,360 --> 00:09:24,520
interrompt ensuite le mouvement du carrousel.

112
00:09:24,520 --> 00:09:28,354
Maintenant, si vous voulez reprendre, le clic sur le bouton de lecture,

113
00:09:28,354 --> 00:09:31,980
puis le Carrousel devrait reprendre son mouvement.

114
00:09:31,980 --> 00:09:37,044
Ainsi, comme vous pouvez le voir, au moment où vous cliquez sur un bouton de lecture, le carrousel commence à bouger.

115
00:09:37,044 --> 00:09:43,125
Maintenant, bien sûr, vous pouvez améliorer davantage la façon dont vous créez ces boutons et ainsi de suite,

116
00:09:43,125 --> 00:09:48,350
mais c'est un moyen simple que nous pouvons introduire pour contrôler notre carrousel.

117
00:09:50,110 --> 00:09:55,400
Cet exercice vous montre comment nous pouvons utiliser du code JavaScript

118
00:09:55,400 --> 00:10:00,650
pour pouvoir contrôler nos composants Bootstrap Javascript.

119
00:10:00,650 --> 00:10:03,933
C' est le bon moment pour faire un commentaire de

120
00:10:03,933 --> 00:10:08,365
votre code avec le message Bootstrap jQuery.

121
00:10:08,365 --> 00:10:14,422
[ MUSIQUE]