Cosa ci serve?
a. Sebbene per lavorare con file .html non abbiamo bisogno di un server locale installato, consiglio di installarne uno per avere tutti i nostri file organizzati in una directory e per poter lavorare più comodamente se in seguito vogliamo aggiungere codice PHP, in questo caso utilizzerà Xampp Server, puoi scaricarlo da https: //www.apachefr… g / es / index.html
B. Dato che faremo una diapositiva, avremo bisogno delle immagini che posizioneremo su di essa, devono avere tutte esattamente la stessa dimensione in pixel, ne userò alcune con una dimensione di 1200 X 600.
C. Un editor di codice a tua scelta, in questo caso ne userò uno chiamato "Parentesi".
Iniziamo …
1. Dato che abbiamo installato Xampp, andiamo nella directory "C: / xampp / htdocs" e creiamo una nuova cartella, in questo caso la chiamerò "SliderShow_main", al suo interno creerò un'altra cartella e la chiamerò "Immagini", lì metterò le immagini che userò nella presentazione.
Clicca sull'immagine per ingrandirla
2. Ora apriremo il nostro editor di codice, andiamo al menu "File> Nuovo".
Clicca sull'immagine per ingrandirla
E in questo nuovo file scriveremo il codice HTML di base.
Clicca sull'immagine per ingrandirla
Salveremo questo file con l'estensione (.html) all'interno della cartella che abbiamo creato nel passaggio 1 "SliderShow_main".3. Successivamente aggiungeremo un titolo per il file e i riferimenti ai file Bootstrap e jquery di cui avremo bisogno per il corretto funzionamento del nostro slider, abbiamo due opzioni possiamo scaricare questi file e averli nelle cartelle del nostro sito all'interno del server locale oppure possiamo aggiungerli dal web, il che ci farebbe risparmiare spazio sul nostro server. Sceglierò la seconda opzione, vedrai come fare nella prossima immagine …
Clicca sull'immagine per ingrandirla
4. Più tardi aggiungeremo all'interno dei duea cui assegneremo rispettivamente le classi "contenitore" e "col-md-12" come segue…
INGRANDIRE
Clicca sull'immagine per ingrandirla
Questi dueche aggiungiamo servirà affinché il nostro slider venga mostrato sopra tutto lo spazio disponibile sul nostro schermo.5. Ora che abbiamo preparato il nostro codice, inizieremo ad aggiungere gli elementi che andranno a comporre la diapositiva, vediamo…
Clicca sull'immagine per ingrandirla
Come puoi vedere abbiamo aggiunto un nuovoche chiamiamo "carousel_1" e assegniamo 2 classi di bootstrap chiamate "carousel" e "slide", si noti che entrambe sono separate da uno spazio, inoltre per far funzionare la diapositiva è necessario aggiungere l'attributo (data-ride = "carosello").6. All'interno del livello precedente aggiungeremo un elenco ordinato con la classe "carousel-indicators" che ci aiuterà ad aggiungere la quantità di indicatori corrispondenti alle nostre immagini, in questo caso utilizzeremo tre immagini quindi avremo tre indicatori a partire dal "0".
Clicca sull'immagine per ingrandirla
Nota che il7. Ora aggiungeremo gli articoli con le immagini che verranno mostrate, vediamo il codice in cui troverai maggiori dettagli…
INGRANDIRE
Clicca sull'immagine per ingrandirla
Dopo aver scritto tutto ciò che è associato al primo elemento, ci limitiamo a copiare e incollare in base alla quantità di elemento di cui abbiamo bisogno, tenendo conto che dobbiamo modificare il percorso dell'immagine e che gli altri elementi non devono contenere la classe "attiva" .
INGRANDIRE
Clicca sull'immagine per ingrandirla
Come puoi vedere abbiamo già aggiunto i 3 elementi con le nostre 3 immagini e il nostro codice è funzionante, ma ora aggiungeremo elementi di controllo (Prec e Next) per spostarci avanti e indietro tra le nostre immagini e aggiungeremo anche alcune icone. Lasciando il nostro codice finale come segue …
INGRANDIRE
Clicca sull'immagine per ingrandirla
Se seguiamo correttamente i passaggi, nel nostro browser possiamo vedere i seguenti risultati …
INGRANDIRE
Clicca sull'immagine per ingrandirla
Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo
Questo tutorial ti ha aiutato?
AltrimentiAIUTA A MIGLIORARE QUESTO TUTORIAL!
Pensi di poter correggere o migliorare questo tutorial? Puoi inviare la tua Edizione con le modifiche che ritieni utili.0 utenti hanno modificato questo tutorial. Modifica e diventa un esperto riconosciuto!
Modifica questo tutorial
TUTORIAL SIMILI
Proprietà e attributi dei moduli HTML5HTML5 e CSS3: relazione e attributi CSS3HTML5 e CSS3 Primi Passi: Elementi Comuni nel Web DesignModello di ricetta con HTML5 e CSS3HTML5 e CSS3: primi passiCrea una scheda Twitter per gli utenti che utilizzano HTML5 e CSS3Barra orizzontale con effetto hover in html5, css3 e bootstrapOttieni le coordinate del cliente con l'API di Google Maps in JavaScript (HMTL5, CSS3 e Bootstrap)
18 commenti
Juan Carlos
25 agosto 2015 11:08
Non per darti un punto positivo. Ottimo tutorial, farai di più Ronny???
grazie per il tuo tutorial
- Rapporto
Nestor1
25 agosto 2015 11:34
Mi è piaciuto molto anche il tutorial, grazie Ronny, solo una domanda: hai un file zip per prendere l'esempio del codice? Sarebbe fantastico se ne avessi voglia. Grazie!!
- Rapporto
Alessandro Teba
25 agosto 2015 16:26
Grande effetto. lo sto analizzando.
Mi unisco a quello che dicono gli altri, se avessi un file con il codice da testare sarebbe fantastico.
Grazie
- Rapporto
Ronny Bonillo
25 agosto 2015 16:54
Buongiorno amici, grazie per il supporto, è fantastico che vi sia piaciuto perché questo è uno dei miei primi 3 tutorial sul sito e non mi aspettavo davvero risposte positive così rapidamente, per quanto riguarda la tua domanda Juan Carlos, ovviamente lo farò. qui per un po 'pubblichiamo nuovi tutorial ogni settimana spero che ti piacciano e che mi supporti con i tuoi commenti e valutazioni … Saluti dal Venezuela …
- Rapporto
Ronny Bonillo
25 agosto 2015 16:58
Prego Nestor1, grazie a te per il commento! Per quanto riguarda la tua domanda, ti consiglio di tornare presto, perché nelle prossime ore il contenuto di questo tutorial verrà aggiornato aggiungendo un .zip alla fine in modo da poter scaricare il codice.
- Rapporto
Eneko
25 agosto 2015 17:06
Prego Nestor1, grazie a te per il commento! Per quanto riguarda la tua domanda, ti consiglio di tornare presto, perché nelle prossime ore il contenuto di questo tutorial verrà aggiornato aggiungendo un .zip alla fine in modo da poter scaricare il codice.
Starò attento anch'io, l'effetto è spettacolare ed è strepitoso. Grazie in anticipo.
- Rapporto
Ronny Bonillo
25 agosto 2015 17:07
Prego Eneko…
- Rapporto
Alessandro Teba
25 agosto 2015 17:13
Buongiorno amici, grazie per il supporto, è fantastico che vi sia piaciuto perché questo è uno dei miei primi 3 tutorial sul sito e non mi aspettavo davvero risposte positive così rapidamente, per quanto riguarda la tua domanda Juan Carlos, ovviamente lo farò. qui per un po 'pubblichiamo nuovi tutorial ogni settimana spero che ti piacciano e che mi supporti con i tuoi commenti e valutazioni … Saluti dal Venezuela …
Quanto velocemente !!
Grazie Ronny, non sai quanto è bello per me che tu abbia condiviso il codice.
Grazie mille sviluppatore!
ps: ti seguo
- Rapporto
Ronny Bonillo
25 agosto 2015 17:19
sei il benvenuto alejandro, grazie per il tuo supporto!
- Rapporto
Nestor1
25 agosto 2015 17:25
Prego Nestor1, grazie a te per il commento! Per quanto riguarda la tua domanda, ti consiglio di tornare presto, perché nelle prossime ore il contenuto di questo tutorial verrà aggiornato aggiungendo un .zip alla fine in modo da poter scaricare il codice.
Grazie mille per aver allegato il file Ronny. E benvenuto in Solvetic.
- Rapporto
Carlos Sanz
02 settembre 2015 16:14
Lo sto testando, grazie per aver collegato Ronny.
- Rapporto
Ronny Bonillo
02 settembre 2015 21:43
prego Carlos
- Rapporto
Fiore nella
08 set 2015 16:25
Grazie per l'allegato!! molto cool.
- Rapporto
Ronny Bonillo
08 set 2015 16:37
Prego Fiore 
- Rapporto
Reneé Toapanta García
02 giugno 2016 21:58
Buongiorno, il tema è molto elegante ma non riesco a scaricarlo, mi chiede ripetutamente di identificarmi e non mi lascia andare da lì. Se puoi aiutarmi ti ringrazio un milione.
- Rapporto
Julio Martinez
Lug 262021-2022 20:03
Non vedo il file .zip per vedere il codice
- Rapporto
aldo1982
Luglio 292021-2022 05:22
molto bene, ma non vedo il .zip per scaricare il codego.
Slds
- Rapporto
Manelly
Set 132021-2022 12:58
Buona…
Super spiegazione e presentazione Ronny Come gli ultimi commentatori… Dov'è il link per scaricare il codice?
Grazie e saluti,
Nelly.
- Rapporto
- Crea un accountIscriviti GRATIS per avere il tuo account SolveticRegistra un account
- IdentificareHai già un account? Accedi quiIdentificami nel mio Account
