[MUSIC]
Molti dei componenti basati su JavaScript di Bootstrap ci forniscono un meccanismo
per controllare alcune delle caratteristiche di questi componenti scrivendo codice JavaScript,
in particolare scrivendo codice Utilizzando la sintassi jQuery.
Quindi andremo a esplorare questo esercizio di indice utilizzando alcuni
controlli basati su JavaScript per il nostro carosello che abbiamo
incluso nella pagina index.html nell'esercizio precedente.
Nell' esercizio precedente, abbiamo introdotto questo carosello nella nostra pagina index.html.
Quello che vorrei fare in questo esercizio è introdurre un paio di
pulsanti di controllo in questo carosello e
quindi utilizzare JavaScript per essere in grado di attivare questi pulsanti.
I pulsanti dovrebbero essere utilizzati per mettere in pausa e
riprodurre l'azione scorrevole di questo carosello.
Quindi, incluso il pulsante nel nostro carosello qui,
possiamo fare clic su un pulsante per fermare l'azione scorrevole del carosello, e
poi possiamo fare clic su un altro pulsante per riprendere l'azione scorrevole del carosello.
Quindi, questo è ciò che possiamo esplorare in questo esercizio.
Per iniziare a questo esercizio, andremo alla pagina index.html.
E subito dopo i controlli sinistro e destro del nostro carosello,
introdurrò un div con il gruppo di pulsanti di classe.
Quindi questo racchiuderà un gruppo di pulsanti di due pulsanti qui, e poi con un ID di,
CarouselButton e
chiuderà il div lì.
Ora, all'interno di questo, ho intenzione di aggiungere due pulsanti.
Quindi lasciami aggiungere un pulsante con la classe btn, btn-danger,
btn-small e
un id di carosello pausa.
Quindi questo agirà come il pulsante di pausa, rallenta il pulsante lì.
E per questo pulsante, ho intenzione di introdurre
un carattere come un'icona con la classe fa fa,
pausa, e chiudere la campata.
Quindi questo introdurrà un pulsante di pausa nel gruppo di pulsanti Carosello.
Ho intenzione di copiare questo e incollarlo di nuovo per creare un altro pulsante.
Quel secondo pulsante, chiamerò btn btn-danger btn-sm, e
poi questo sarebbe gioco-carosello.
E la classe span,
il pulsante sarebbe se si gioca qui.
Diciamo che le modifiche e vai a dare un'occhiata veloce alla pagina web.
Dai un'occhiata ai pulsanti come esistono nel nostro browser, puoi vedere che
questi due pulsanti sono ora posizionati nell'angolo sinistro della mia Carousel.
Vorrei riposizionare questi pulsanti sul bordo destro, in modo
che non causi questo spazio blu e vuoto sotto l'immagine qui.
Quindi lasciami usare un paio di proprietà CSS per riposizionare questi pulsanti
nella colonna destra del carosello.
Andando a quel file CSS di inizio stile,
lasciami introdurre un codice CSS qui.
Quindi per l'elemento con l'ID CarouselButtons,
lo sto posizionando sul bordo destro e in basso, 0 pixel qui.
Quindi questi due e poi la posizione è assoluta.
Quindi questo posizionerà questi pulsanti nell'angolo destro del mio carosello.
Ovviamente, semplicemente introducendo i pulsanti nel carosello non servirà a
nessun scopo.
Ora, stiamo andando a sfruttare i controlli JavaScript che
il Carousel fornisce scrivendo un po 'di codice jQuery
nella parte inferiore della pagina index.html per fare in modo che questi pulsanti facciano il loro lavoro.
Vogliamo essere in grado di mettere in pausa e riprendere l'azione scorrevole del mio carosello.
Andando in fondo alla pagina index.html, lasciami introdurre alcuni script qui.
Quindi questo script dovrebbe contenere
del codice JavaScript scritto nella sintassi jQuery.
Quindi ho intenzione di dire,
$ (documento) .ready (funzione), E
questa funzione dovrebbe contenere un paio di
funzioni qui per attivare i pulsanti.
Quindi direi, mycarosello.
Questo è l'ID del carosello che ci vengono introdotti,
quindi diremo, carosello,
Intervallo: 2000.
Quindi ciò che fa è impostare l'intervallo di scorrimento del carosello
a 2000 millisecondi o 2 secondi.
Quindi sto rendendo un po' più veloce per
l'azione scorrevole che si svolga nel carosello.
Continua con il codice jQuery qui.
Ora ho intenzione di attivare quel pulsante di pausa, quindi dirò carosello pausa.
Quindi questo è l'ID che ho dato al pulsante di pausa lì.
Quindi questo è il motivo per dare l'id
Quindi voglio attivare il pulsante di pausa.
Quindi dico quando l'utente fa clic.
Quindi puoi vedere come leggere la sintassi.
Quindi questo dice, per il pulsante carosello pausa,
se un'azione di clic viene eseguita dall'utente, quindi esegui
questa particolare funzione che specifichi all'interno di questo codice qui.
Qual è la funzione che voglio fare?
Voglio essere in grado di mettere
in pausa la giostra.
Quindi diremo, carosello ('pausa').
Quindi ora vedi come hai usato i controlli basati su jQuery.
I controlli JavaScript che sono dati per il componente Bootstrap Carousel e
scritto del codice per essere in grado di controllare il carosello.
Allo stesso modo, voglio essere in grado di attivare il pulsante di riproduzione.
Quindi, quando si fa clic sul pulsante di riproduzione,
voglio che l'azione scorrevole del carosello riprenda.
Quindi ho intenzione di copiare semplicemente questo codice, incollarlo lì.
E poi direi carosello, fai
clic su funzione il mio carosello e poi la funzione dice carosello ('ciclo').
Questo è il modo in cui si specifica che il carosello
dovrebbe riprendere a scivolare come prima.
Quindi questo, questa funzione che stiamo allegando al pulsante play qui.
Quindi con questi due,
la nostra funzione è introdotta all'interno di questa funzione pronta per il documento.
Siete pronti per attivare la Carosello
e i due pulsanti per controllare il comportamento del nostro Carosello.
Quindi mostriamo i cambiamenti, e andiamo a dare un'occhiata al comportamento del nostro carosello.
Andando alla nostra pagina, ora vedi che il tuo carosello si sta muovendo molto velocemente,
perché ho impostato l'intervallo su 2.000 millisecondi o 2 secondi.
Quindi ogni due secondi, vedrai l'azione scorrevole della Carosello.
Questo è decisamente fastidioso.
Quindi lasciami mettere in pausa facendo clic sul pulsante di pausa.
Quindi, quando si fa clic sul pulsante di pausa, l'azione scorrevole della Carosello viene messa in pausa.
Perché quando si fa clic sul pulsante pausa, la funzione che abbiamo
introdotto nel codice JavaScript entra in azione e
quindi mette in pausa il movimento del carosello.
Ora, se si desidera riprendere, fare clic sul pulsante play e
poi il carosello dovrebbe riprendere il suo movimento.
Quindi, come puoi vedere, nel momento in cui fai clic su un pulsante di riproduzione, la giostra inizia a muoversi.
Ora, naturalmente, è possibile migliorare di più su come si creano questi pulsanti e così via,
ma questo è un modo semplice che possiamo introdurre per controllare il nostro carosello.
Questo esercizio illustra come possiamo usare il codice
JavaScript per controllare i nostri componenti basati su JavaScript Bootstrap.
Questo è un buon momento per fare un commento del
tuo codice con il messaggio Bootstrap jQuery.
[ MUSIC]