Carosello Usando Javascript

| | | | | | | | | | | | | | | | | | | | | | |

Quando pensiamo a una giostra, di solito pensiamo alla giostra del parco divertimenti che potresti aver fatto da bambino: una grande piattaforma girevole con cavalli colorati che si muovono su e giù Appena vai. mentre la giostra avanza.

Un giro con Bootstrap non è la varietà da fiera che abbiamo imparato da bambini, ma il concetto ha alcune somiglianze. Questo articolo spiega come iniziare a utilizzare Bootstrap, spiega cos`è l`elemento dell`interfaccia utente del carosello, quando dovrebbe essere utilizzato e come crearne uno utilizzando il framework Bootstrap.

Guida introduttiva

La prima cosa che dobbiamo fare per impostare un Bootstrap Carousel è assicurarci di avere le dipendenze corrette. Per questo abbiamo bisogno di Bootstrap, PopperJS e jQuery. Visita Avvio rapido Bootstrap per aiutarti ad aggiungere le tue dipendenze al tuo progetto.

Come gestire i requisiti di dipendenza dipende da te, ma il modo più semplice e adatto ai principianti è utilizzare Content Delivery Network & ndash; il CDN - per jQuery, Popper.js e Bootstrap. Presta attenzione all`ordine dei tag < script src = "https: //stack.bootstrapcdn4.bootstrap/integrity.bootpath. =" sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf / nJGzIxFDsf4x; RMltonymous; La cosa importante da capire su come funzionano i controlli è che l`href deve corrispondere all`id univoco del div carosello globale.

Controllo successivo:


Contenitore più esterno del carosello:

Precedente Avanti < /a>

L`elenco ordinato nello snippet di codice sopra è questo una bandiera. La classe .active corrisponde alla classe attiva nel carousel-items.

: 1em; "> " ALTRO: Selettore attributi CSS

Conclusione

All`inizio, potrebbero sembrare MOLTE informazioni da digerire. La cosa principale da ricordare è semplicemente seguire la documentazione. Non è necessario memorizzare come farlo quando la documentazione è così ben scritta e dettagliata.

È sicuramente una buona idea sapere come funziona tutto su Bootstrap: dai un`occhiata a questi CSS e JS ridotti al minimo se hai il tempo di vedere che aspetto hanno gli elementi con stile e script in Bootstrap. , almeno tieni presente il significato di tutti gli attributi nel codice di esempio in modo da poterlo adattare alle tue esigenze e utilizzarlo nel tuo progetto.

Un`ultima cosa: tieni presente che il componente del carosello potrebbe non essere il migliore da utilizzare in termini di accessibilità.Assicurati di continuare a rendere la tua pagina il più accessibile possibile e di non utilizzare informazioni nel tuo carosello che non possono essere trovate altrove.

Buona fortuna per continuare il tuo viaggio da utente Bootstrap!