De ce avem nevoie?
la. Deși pentru a lucra cu fișiere .html nu avem nevoie de un server local instalat, vă recomand să instalați unul pentru a avea toate fișierele organizate într-un director și pentru a putea lucra mai confortabil dacă mai târziu dorim să adăugăm cod PHP, în acest caz I va folosi Xampp Server, puteți descărca de pe https: //www.apachefr… g / es / index.html
b. Deoarece vom face o diapozitivă, vom avea nevoie de imaginile pe care le vom pune pe ea, toate trebuie să aibă exact aceeași dimensiune în pixeli, eu voi folosi unele cu o dimensiune de 1200 X 600.
c. Un editor de cod la alegere, în acest caz voi folosi unul numit „Paranteze”.
Să începem …
1. De când am instalat Xampp, mergem la director „C: / xampp / htdocs” și creăm un folder nou, în acest caz îl voi numi „SliderShow_main”, în interiorul său voi crea un alt folder și îl voi numi „Imagini”, acolo voi plasa imaginile pe care le voi folosi în prezentarea de diapozitive.
Faceți clic pe imagine pentru ao mări
2. Acum ne vom deschide editorul de cod, mergem la meniu „Fișier> Nou”.
Faceți clic pe imagine pentru ao mări
Și în acest nou fișier vom scrie codul HTML de bază.
Faceți clic pe imagine pentru ao mări
Vom salva acest fișier cu extensia (.html) în dosarul pe care l-am creat la pasul 1 „SliderShow_main”.3. Mai târziu vom adăuga un titlu pentru fișier și referințele la fișierele Bootstrap și jQuery de care vom avea nevoie pentru ca glisorul nostru să funcționeze corect, avem două opțiuni pentru a descărca aceste fișiere și a le avea în folderele de pe site-ul nostru de pe serverul local sau le putem adăuga de pe web, ceea ce ne-ar economisi spațiu pe serverul nostru. Voi alege a doua opțiune, veți vedea cum să o faceți în următoarea imagine …
Faceți clic pe imagine pentru ao mări
4. Mai târziu vom adăuga în cele douăcărora le vom atribui clasele „container” și respectiv „col-md-12” după cum urmează …
MARI
Faceți clic pe imagine pentru ao mări
Acestea douape care îl adăugăm va servi astfel încât glisorul nostru să fie afișat deasupra tuturor spațiului disponibil pe ecran.5. Acum că ne-am pregătit codul, vom începe să adăugăm elementele care vor alcătui diapozitivul, să vedem …
Faceți clic pe imagine pentru ao mări
După cum puteți vedea, am adăugat un noupe care îl numim „carusel_1” și atribuim 2 clase de bootstrap numite „carusel” și „slide”, rețineți că ambele sunt separate de un spațiu, în plus pentru ca diapozitivul să funcționeze este necesar să adăugați atributul (data-ride = "carusel").6. În cadrul stratului anterior vom adăuga o listă ordonată cu clasa „indicatori carusel” care ne vor ajuta să adăugăm cantitatea de indicatori corespunzătoare imaginilor noastre, în acest caz vom folosi trei imagini deci vom avea trei indicatori începând de la „0”.
Faceți clic pe imagine pentru ao mări
Rețineți că7. Acum vom adăuga articolele cu imaginile care vor fi afișate, să vedem codul în care veți găsi mai multe detalii …
MARI
Faceți clic pe imagine pentru ao mări
După ce am scris tot ce este asociat cu primul articol, pur și simplu copiem și lipim în funcție de cantitatea de articol de care avem nevoie, ținând cont că trebuie să schimbăm calea imaginii și că celelalte articole nu trebuie să conțină clasa „activă” .
MARI
Faceți clic pe imagine pentru ao mări
După cum puteți vedea, am adăugat deja cele 3 articole cu cele 3 imagini ale noastre, iar codul nostru este funcțional, dar acum vom adăuga elemente de control (Anterior și Următor) pentru a ne deplasa înainte și înapoi între imaginile noastre și vom adăuga și câteva pictograme. Lăsând codul nostru final după cum urmează …
MARI
Faceți clic pe imagine pentru ao mări
Dacă urmăm corect pașii, în browserul nostru putem vedea următoarele rezultate …
MARI
Faceți clic pe imagine pentru ao mări
V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv
Te-a ajutat acest tutorial?
Dacă nuAJUTĂ LA ÎMBUNĂTĂȚIREA ACESTUI TUTORIAL!
Crezi că poți corecta sau îmbunătăți acest tutorial? Puteți trimite ediția cu modificările pe care le considerați utile.0 utilizatori au editat acest tutorial. Editați și deveniți un expert recunoscut!
Editați acest tutorial
TUTORII SIMILARE
Proprietăți și atribute ale formularelor HTML5HTML5 și CSS3: relație și atribute CSS3HTML5 și CSS3 Primii pași: elemente comune în web designȘablon de rețetă cu HTML5 și CSS3HTML5 și CSS3: primii pașiCreați un card Twitter pentru utilizatorii care utilizează HTML5 și CSS3Bara orizontală cu efect de hover în html5, css3 și bootstrapObțineți coordonatele clientului cu API-ul Google Maps în JavaScript (HMTL5, CSS3 și Bootstrap)
18 comentarii
Juan Carlos
25 august 2015 11:08
Să nu vă dau un punct pozitiv. Super tutorial, o să faci mai mult Ronny ???
mulțumesc pentru tutorial.
- Raport
Nestor1
25 august 2015 11:34
Mi-a plăcut și tutorialul, mulțumesc Ronny, doar o întrebare: Aveți un fișier zip pentru a lua exemplul codului? Ar fi minunat dacă ai chef. Mulțumesc!!
- Raport
Alexander Teba
25 august 2015 16:26
Efect grozav. O analizez.
Mă alătur celor ce spun ceilalți, dacă ai avea un fișier cu codul de testat ar fi minunat.
Mulțumesc
- Raport
Ronny Bonillo
25 august 2015 16:54
Bună dimineața prieteni, mulțumesc pentru sprijin, este minunat că ți-a plăcut pentru că acesta este unul dintre primele mele 3 tutoriale de pe site și chiar nu mă așteptam la răspunsuri pozitive atât de repede, cu privire la întrebarea ta Juan Carlos, bineînțeles că o voi face. aici pentru o vreme postând noi tutoriale în fiecare săptămână sper să vă placă și să mă sprijiniți cu comentariile și evaluările dvs. … Salutări din Venezuela …
- Raport
Ronny Bonillo
25 august 2015 16:58
Bine ai venit Nestor1, mulțumesc pentru comentarii! În ceea ce privește întrebarea dvs., vă recomand să reveniți în curând, deoarece în următoarele câteva ore conținutul acestui tutorial va fi actualizat prin adăugarea unui .zip la final, astfel încât să puteți descărca codul.
- Raport
Eneko
25 august 2015 17:06
Bine ai venit Nestor1, mulțumesc pentru comentarii! În ceea ce privește întrebarea dvs., vă recomand să reveniți în curând, deoarece în următoarele câteva ore conținutul acestui tutorial va fi actualizat prin adăugarea unui .zip la final, astfel încât să puteți descărca codul.
Voi fi și eu atent, efectul este spectaculos și este uimitor. Mulțumesc anticipat.
- Raport
Ronny Bonillo
25 august 2015 17:07
Bine ai venit Eneko …
- Raport
Alexander Teba
25 august 2015 17:13
Bună dimineața prieteni, mulțumesc pentru sprijin, este minunat că ți-a plăcut pentru că acesta este unul dintre primele mele 3 tutoriale de pe site și chiar nu mă așteptam la răspunsuri pozitive atât de repede, cu privire la întrebarea ta Juan Carlos, bineînțeles că o voi face. aici pentru o vreme postând noi tutoriale în fiecare săptămână sper să vă placă și să mă sprijiniți cu comentariile și evaluările dvs. … Salutări din Venezuela …
Cât de repede !!
Mulțumesc Ronny, nu știi cât de bine este pentru mine că ai distribuit codul.
Mulțumesc mult dezvoltator!
ps: te urmez.
- Raport
Ronny Bonillo
25 august 2015 17:19
Bine ai venit alejandro, mulțumesc pentru sprijin!
- Raport
Nestor1
25 august 2015 17:25
Bine ai venit Nestor1, mulțumesc pentru comentarii! În ceea ce privește întrebarea dvs., vă recomand să reveniți în curând, deoarece în următoarele câteva ore conținutul acestui tutorial va fi actualizat prin adăugarea unui .zip la final, astfel încât să puteți descărca codul.
Vă mulțumesc foarte mult pentru atașarea fișierului Ronny. Și bine ați venit la Solvetic.
- Raport
Carlos Sanz
02 septembrie 2015 16:14
Îl testez, mulțumesc că l-am atașat pe Ronny.
- Raport
Ronny Bonillo
02 septembrie 2015 21:43
ești binevenit Carlos
- Raport
Fiore nella
08 septembrie 2015 16:25
Mulțumesc pentru atașament !! foarte tare.
- Raport
Ronny Bonillo
08 septembrie 2015 16:37
Bine ai venit Fiore 
- Raport
Reneé Toapanta García
02 iunie 2016 21:58
Bună dimineața, tema este foarte elegantă dar nu o pot descărca, mă cere din nou și din nou să mă identific și nu mă va lăsa să plec de acolo. Dacă m-ai putea ajuta, îți mulțumesc un milion.
- Raport
Julio Martinez
Iul 262021-2022 20:03
Nu văd fișierul .zip pentru a vedea codul
- Raport
aldo1982
29 iul.202021-2022 05:22
foarte bine, dar nu văd .zip-ul pentru a descărca codego-ul.
Slds
- Raport
Manelly
Septembrie 132021-2022 12:58
Bun…
Super explicație și prezentare Ronny La fel ca și ultimii comentatori … Unde este linkul pentru a descărca codul?
Mulțumesc și salutări,
Nelly.
- Raport
- Creează contÎnscrieți-vă GRATUIT pentru a avea contul SolveticInregistreaza un cont
- IdentificaAi deja un cont? Conectați-vă aiciIdentifică-mă în contul meu
