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

2
00:00:04,523 --> 00:00:10,934
Molti dei componenti basati su JavaScript di Bootstrap ci forniscono un meccanismo

3
00:00:10,934 --> 00:00:17,070
per controllare alcune delle caratteristiche di questi componenti scrivendo codice JavaScript,

4
00:00:17,070 --> 00:00:21,510
in particolare scrivendo codice Utilizzando la sintassi jQuery.

5
00:00:21,510 --> 00:00:26,181
Quindi andremo a esplorare questo esercizio di indice utilizzando alcuni

6
00:00:26,181 --> 00:00:30,561
controlli basati su JavaScript per il nostro carosello che abbiamo

7
00:00:30,561 --> 00:00:35,537
incluso nella pagina index.html nell'esercizio precedente.

8
00:00:37,171 --> 00:00:42,810
Nell' esercizio precedente, abbiamo introdotto questo carosello nella nostra pagina index.html.

9
00:00:42,810 --> 00:00:47,260
Quello che vorrei fare in questo esercizio è introdurre un paio di

10
00:00:47,260 --> 00:00:50,240
pulsanti di controllo in questo carosello e

11
00:00:50,240 --> 00:00:54,920
quindi utilizzare JavaScript per essere in grado di attivare questi pulsanti.

12
00:00:54,920 --> 00:00:57,850
I pulsanti dovrebbero essere utilizzati per mettere in pausa e

13
00:00:57,850 --> 00:01:03,350
riprodurre l'azione scorrevole di questo carosello.

14
00:01:03,350 --> 00:01:08,410
Quindi, incluso il pulsante nel nostro carosello qui,

15
00:01:08,410 --> 00:01:13,000
possiamo fare clic su un pulsante per fermare l'azione scorrevole del carosello, e

16
00:01:13,000 --> 00:01:18,070
poi possiamo fare clic su un altro pulsante per riprendere l'azione scorrevole del carosello.

17
00:01:18,070 --> 00:01:21,390
Quindi, questo è ciò che possiamo esplorare in questo esercizio.

18
00:01:22,520 --> 00:01:26,920
Per iniziare a questo esercizio, andremo alla pagina index.html.

19
00:01:26,920 --> 00:01:32,420
E subito dopo i controlli sinistro e destro del nostro carosello,

20
00:01:32,420 --> 00:01:40,400
introdurrò un div con il gruppo di pulsanti di classe.

21
00:01:40,400 --> 00:01:47,023
Quindi questo racchiuderà un gruppo di pulsanti di due pulsanti qui, e poi con un ID di,

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

23
00:01:54,224 --> 00:01:59,290
chiuderà il div lì.

24
00:01:59,290 --> 00:02:03,530
Ora, all'interno di questo, ho intenzione di aggiungere due pulsanti.

25
00:02:03,530 --> 00:02:12,385
Quindi lasciami aggiungere un pulsante con la classe btn, btn-danger,

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

27
00:02:16,910 --> 00:02:24,030
un id di carosello pausa.

28
00:02:24,030 --> 00:02:30,970
Quindi questo agirà come il pulsante di pausa, rallenta il pulsante lì.

29
00:02:30,970 --> 00:02:36,600
E per questo pulsante, ho intenzione di introdurre

30
00:02:36,600 --> 00:02:41,201
un carattere come un'icona con la classe fa fa,

31
00:02:42,923 --> 00:02:49,410
pausa, e chiudere la campata.

32
00:02:49,410 --> 00:02:55,790
Quindi questo introdurrà un pulsante di pausa nel gruppo di pulsanti Carosello.

33
00:02:55,790 --> 00:03:04,450
Ho intenzione di copiare questo e incollarlo di nuovo per creare un altro pulsante.

34
00:03:04,450 --> 00:03:09,368
Quel secondo pulsante, chiamerò btn btn-danger btn-sm, e

35
00:03:09,368 --> 00:03:12,259
poi questo sarebbe gioco-carosello.

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

37
00:03:17,580 --> 00:03:21,660
il pulsante sarebbe se si gioca qui.

38
00:03:23,940 --> 00:03:27,965
Diciamo che le modifiche e vai a dare un'occhiata veloce alla pagina web.

39
00:03:29,180 --> 00:03:34,850
Dai un'occhiata ai pulsanti come esistono nel nostro browser, puoi vedere che

40
00:03:34,850 --> 00:03:39,940
questi due pulsanti sono ora posizionati nell'angolo sinistro della mia Carousel.

41
00:03:40,970 --> 00:03:44,660
Vorrei riposizionare questi pulsanti sul bordo destro, in modo

42
00:03:44,660 --> 00:03:51,700
che non causi questo spazio blu e vuoto sotto l'immagine qui.

43
00:03:51,700 --> 00:03:56,410
Quindi lasciami usare un paio di proprietà CSS per riposizionare questi pulsanti

44
00:03:56,410 --> 00:03:59,230
nella colonna destra del carosello.

45
00:04:00,760 --> 00:04:04,140
Andando a quel file CSS di inizio stile,

46
00:04:04,140 --> 00:04:08,440
lasciami introdurre un codice CSS qui.

47
00:04:08,440 --> 00:04:14,166
Quindi per l'elemento con l'ID CarouselButtons,

48
00:04:14,166 --> 00:04:18,880
lo sto posizionando sul bordo destro e in basso, 0 pixel qui.

49
00:04:18,880 --> 00:04:22,280
Quindi questi due e poi la posizione è assoluta.

50
00:04:22,280 --> 00:04:28,300
Quindi questo posizionerà questi pulsanti nell'angolo destro del mio carosello.

51
00:04:29,710 --> 00:04:34,280
Ovviamente, semplicemente introducendo i pulsanti nel carosello non servirà a

52
00:04:34,280 --> 00:04:35,420
nessun scopo.

53
00:04:35,420 --> 00:04:40,330
Ora, stiamo andando a sfruttare i controlli JavaScript che

54
00:04:40,330 --> 00:04:46,310
il Carousel fornisce scrivendo un po 'di codice jQuery

55
00:04:46,310 --> 00:04:52,204
nella parte inferiore della pagina index.html per fare in modo che questi pulsanti facciano il loro lavoro.

56
00:04:52,204 --> 00:04:57,950
Vogliamo essere in grado di mettere in pausa e riprendere l'azione scorrevole del mio carosello.

57
00:04:58,970 --> 00:05:06,830
Andando in fondo alla pagina index.html, lasciami introdurre alcuni script qui.

58
00:05:06,830 --> 00:05:10,980
Quindi questo script dovrebbe contenere

59
00:05:10,980 --> 00:05:15,750
del codice JavaScript scritto nella sintassi jQuery.

60
00:05:15,750 --> 00:05:19,088
Quindi ho intenzione di dire,

61
00:05:19,088 --> 00:05:28,664
$ (documento) .ready (funzione), E

62
00:05:28,664 --> 00:05:33,814
questa funzione dovrebbe contenere un paio di

63
00:05:33,814 --> 00:05:39,320
funzioni qui per attivare i pulsanti.

64
00:05:39,320 --> 00:05:45,430
Quindi direi, mycarosello.

65
00:05:45,430 --> 00:05:50,427
Questo è l'ID del carosello che ci vengono introdotti,

66
00:05:50,427 --> 00:05:53,099
quindi diremo, carosello,

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

68
00:06:01,804 --> 00:06:06,720
Quindi ciò che fa è impostare l'intervallo di scorrimento del carosello

69
00:06:06,720 --> 00:06:10,130
a 2000 millisecondi o 2 secondi.

70
00:06:10,130 --> 00:06:12,890
Quindi sto rendendo un po' più veloce per

71
00:06:12,890 --> 00:06:16,330
l'azione scorrevole che si svolga nel carosello.

72
00:06:16,330 --> 00:06:20,430
Continua con il codice jQuery qui.

73
00:06:20,430 --> 00:06:26,835
Ora ho intenzione di attivare quel pulsante di pausa, quindi dirò carosello pausa.

74
00:06:26,835 --> 00:06:31,430
Quindi questo è l'ID che ho dato al pulsante di pausa lì.

75
00:06:31,430 --> 00:06:34,960
Quindi questo è il motivo per dare l'id

76
00:06:34,960 --> 00:06:38,720
Quindi voglio attivare il pulsante di pausa.

77
00:06:38,720 --> 00:06:40,980
Quindi dico quando l'utente fa clic.

78
00:06:40,980 --> 00:06:42,920
Quindi puoi vedere come leggere la sintassi.

79
00:06:42,920 --> 00:06:47,470
Quindi questo dice, per il pulsante carosello pausa,

80
00:06:47,470 --> 00:06:53,510
se un'azione di clic viene eseguita dall'utente, quindi esegui

81
00:06:53,510 --> 00:07:01,000
questa particolare funzione che specifichi all'interno di questo codice qui.

82
00:07:01,000 --> 00:07:03,140
Qual è la funzione che voglio fare?

83
00:07:03,140 --> 00:07:05,324
Voglio essere in grado di mettere

84
00:07:09,144 --> 00:07:15,200
in pausa la giostra.

85
00:07:15,200 --> 00:07:20,665
Quindi diremo, carosello ('pausa').

86
00:07:21,860 --> 00:07:29,884
Quindi ora vedi come hai usato i controlli basati su jQuery.

87
00:07:29,884 --> 00:07:36,020
I controlli JavaScript che sono dati per il componente Bootstrap Carousel e

88
00:07:36,020 --> 00:07:41,611
scritto del codice per essere in grado di controllare il carosello.

89
00:07:41,611 --> 00:07:46,060
Allo stesso modo, voglio essere in grado di attivare il pulsante di riproduzione.

90
00:07:46,060 --> 00:07:48,410
Quindi, quando si fa clic sul pulsante di riproduzione,

91
00:07:48,410 --> 00:07:52,380
voglio che l'azione scorrevole del carosello riprenda.

92
00:07:52,380 --> 00:07:56,950
Quindi ho intenzione di copiare semplicemente questo codice, incollarlo lì.

93
00:07:56,950 --> 00:08:00,720
E poi direi carosello, fai

94
00:08:00,720 --> 00:08:07,130
clic su funzione il mio carosello e poi la funzione dice carosello ('ciclo').

95
00:08:07,130 --> 00:08:12,477
Questo è il modo in cui si specifica che il carosello

96
00:08:12,477 --> 00:08:16,850
dovrebbe riprendere a scivolare come prima.

97
00:08:16,850 --> 00:08:21,620
Quindi questo, questa funzione che stiamo allegando al pulsante play qui.

98
00:08:21,620 --> 00:08:23,380
Quindi con questi due,

99
00:08:23,380 --> 00:08:28,800
la nostra funzione è introdotta all'interno di questa funzione pronta per il documento.

100
00:08:28,800 --> 00:08:33,870
Siete pronti per attivare la Carosello

101
00:08:33,870 --> 00:08:38,690
e i due pulsanti per controllare il comportamento del nostro Carosello.

102
00:08:38,690 --> 00:08:43,240
Quindi mostriamo i cambiamenti, e andiamo a dare un'occhiata al comportamento del nostro carosello.

103
00:08:44,570 --> 00:08:50,084
Andando alla nostra pagina, ora vedi che il tuo carosello si sta muovendo molto velocemente,

104
00:08:50,084 --> 00:08:55,603
perché ho impostato l'intervallo su 2.000 millisecondi o 2 secondi.

105
00:08:55,603 --> 00:08:59,640
Quindi ogni due secondi, vedrai l'azione scorrevole della Carosello.

106
00:08:59,640 --> 00:09:01,380
Questo è decisamente fastidioso.

107
00:09:01,380 --> 00:09:05,410
Quindi lasciami mettere in pausa facendo clic sul pulsante di pausa.

108
00:09:05,410 --> 00:09:11,080
Quindi, quando si fa clic sul pulsante di pausa, l'azione scorrevole della Carosello viene messa in pausa.

109
00:09:11,080 --> 00:09:15,080
Perché quando si fa clic sul pulsante pausa, la funzione che abbiamo

110
00:09:16,820 --> 00:09:21,360
introdotto nel codice JavaScript entra in azione e

111
00:09:21,360 --> 00:09:24,520
quindi mette in pausa il movimento del carosello.

112
00:09:24,520 --> 00:09:28,354
Ora, se si desidera riprendere, fare clic sul pulsante play e

113
00:09:28,354 --> 00:09:31,980
poi il carosello dovrebbe riprendere il suo movimento.

114
00:09:31,980 --> 00:09:37,044
Quindi, come puoi vedere, nel momento in cui fai clic su un pulsante di riproduzione, la giostra inizia a muoversi.

115
00:09:37,044 --> 00:09:43,125
Ora, naturalmente, è possibile migliorare di più su come si creano questi pulsanti e così via,

116
00:09:43,125 --> 00:09:48,350
ma questo è un modo semplice che possiamo introdurre per controllare il nostro carosello.

117
00:09:50,110 --> 00:09:55,400
Questo esercizio illustra come possiamo usare il codice

118
00:09:55,400 --> 00:10:00,650
JavaScript per controllare i nostri componenti basati su JavaScript Bootstrap.

119
00:10:00,650 --> 00:10:03,933
Questo è un buon momento per fare un commento del

120
00:10:03,933 --> 00:10:08,365
tuo codice con il messaggio Bootstrap jQuery.

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