Što trebamo?
do. Iako za rad s .html datotekama ne trebamo instaliran lokalni poslužitelj, preporučujem da instalirate jednu kako bi sve naše datoteke bile organizirane u direktorij i kako bi mogli raditi udobnije ako kasnije želimo dodati PHP kôd, u ovom slučaju ja koristit će Xampp poslužitelj, možete ga preuzeti s https: //www.apachefr… g / es / index.html
b. Budući da ćemo napraviti slajd, trebat će nam slike koje ćemo na njega postaviti, sve moraju imati potpuno istu veličinu u pikselima, upotrijebit ću neke veličine 1200 X 600.
c. Uređivač koda po vašem izboru, u ovom slučaju koristit ću jedan pozvan "Zagrade".
Započnimo …
1. Budući da smo instalirali Xampp, idemo u direktorij "C: / xampp / htdocs" i mi stvaramo novu mapu, u ovom slučaju ja ću je nazvati "SliderShow_main", unutar njega stvorit ću drugu mapu i nazvati je "Slike", tamo ću postaviti slike koje ću koristiti u prezentaciji.
Kliknite na sliku da biste je povećali
2. Sada ćemo otvoriti naš uređivač koda, idemo na izbornik "Datoteka> Novo".
Kliknite na sliku da biste je povećali
U ovoj novoj datoteci napisat ćemo kôd Osnovni HTML.
Kliknite na sliku da biste je povećali
Spremit ćemo ovu datoteku s nastavkom (.html) unutar mape koju smo stvorili u 1. koraku "SliderShow_main".3. Kasnije ćemo dodati naslov datoteke i reference na datoteke Bootstrap i jquery koje će nam trebati za ispravan rad klizača. Imamo dvije mogućnosti za preuzimanje ovih datoteka i njihovo stavljanje u mape na našoj web stranici na lokalnom poslužitelju ili ih možemo dodati s weba, što bi nam uštedjelo prostor na poslužitelju. Izabrat ću drugu opciju, vidjet ćete kako to učiniti na sljedećoj slici …
Kliknite na sliku da biste je povećali
4. Kasnije ćemo dodati dvakojima ćemo dodijeliti klase "spremnik" i "col-md-12" na sljedeći način …
POVEĆAJTE
Kliknite na sliku da biste je povećali
Ovo dvojekoje dodamo poslužit će tako da se naš klizač prikaže iznad svih raspoloživih prostora na ekranu.5. Sada kada smo pripremili naš kôd, počet ćemo dodavati elemente koji će činiti slajd, da vidimo …
Kliknite na sliku da biste je povećali
Kao što vidite dodali smo novukoju nazivamo "carousel_1" i dodjeljujemo 2 klase bootstrapa pod nazivom "carousel" i "slide", imajte na umu da su obje odvojene razmakom, dodatno za rad slajda potrebno je dodati atribut (data-ride = "vrtuljak").6. Unutar prethodnog sloja dodat ćemo uređen popis s klasom "vrtuljci-indikatori" koji će nam pomoći da dodamo količinu pokazatelja koji odgovaraju našim slikama, u ovom slučaju koristit ćemo tri slike pa ćemo imati tri pokazatelja počevši od "0".
Kliknite na sliku da biste je povećali
Imajte na umu da7. Sada ćemo dodati stavke sa slikama koje će biti prikazane, da vidimo kod u kojem ćete pronaći više detalja …
POVEĆAJTE
Kliknite na sliku da biste je povećali
Nakon što smo napisali sve što je povezano s prvom stavkom, jednostavno kopiramo i zalijepimo prema količini stavke koja nam je potrebna, uzimajući u obzir da moramo promijeniti putanju slike i da ostale stavke ne smiju sadržavati "aktivnu" klasu .
POVEĆAJTE
Kliknite na sliku da biste je povećali
Kao što vidite, već smo dodali 3 stavke s naše 3 slike i naš kôd je funkcionalan, ali sada ćemo dodati kontrolne elemente (Prethodna i Sljedeća) za pomicanje naprijed -natrag između naših slika, a mi ćemo također dodati neke ikone. Naš konačni kod ostavljamo na sljedeći način …
POVEĆAJTE
Kliknite na sliku da biste je povećali
Ako pravilno slijedimo korake, u našem pregledniku možemo vidjeti sljedeće rezultate …
POVEĆAJTE
Kliknite na sliku da biste je povećali
Je li vam se svidio i pomogao ovaj vodič?Autor možete nagraditi pritiskom na ovaj gumb kako biste mu dali pozitivan bod
Je li vam ovaj vodič pomogao?
Ako nePOMOZITE POBOLJŠAJTE OVAJ VODIČ!
Mislite li da možete ispraviti ili poboljšati ovaj vodič? Možete poslati svoje izdanje s promjenama koje smatrate korisnima.0 korisnika je uredilo ovaj vodič. Uredite i postanite priznati stručnjak!
Uredite ovaj vodič
SLIČNI VODIČI
Svojstva i atributi HTML5 obrazacaHTML5 i CSS3: Odnos i atributi CSS3HTML5 i CSS3 prvi koraci: zajednički elementi u web dizajnuPredložak recepta s HTML5 i CSS3HTML5 i CSS3: Prvi koraciIzradite Twitter karticu za korisnike koji koriste HTML5 i CSS3Vodoravna traka s hover efektom u html5, css3 i bootstrapuNabavite koordinate klijenata s API -jem za Google karte u JavaScriptu (HMTL5, CSS3 i Bootstrap)
18 komentara
Juan Carlos
25. kolovoza 2015 11:08
Da vam ne dam pozitivan bod. Odličan vodič, hoćeš li više raditi Ronny ???
hvala na tutorijalu.
- izvješće
Nestor1
25. kolovoza 2015. 11:34
Svidio mi se i vodič, hvala Ronny, samo jedno pitanje: Imate li zip datoteku za primjer koda? Bilo bi super da se tako osjećate. Hvala vam!!
- izvješće
Aleksandar Teba
25. kolovoza 2015 16:26
Odličan učinak. Ja to analiziram.
Pridružujem se onome što drugi kažu, da imate datoteku s kodom za testiranje, bilo bi super.
Hvala vam
- izvješće
Ronny Bonillo
25. kolovoza 2015 16:54
Dobro jutro prijatelji, hvala na podršci, super je što vam se svidjelo jer je ovo jedan od moja prva 3 vodiča na web mjestu i zaista nisam očekivao pozitivne odgovore tako brzo, u vezi vašeg pitanja Juan Carlos, naravno da hoću. ovdje neko vrijeme objavljujem nove upute svaki tjedan nadam se da vam se sviđaju i da me podržavate svojim komentarima i ocjenama … pozdrav iz Venezuele …
- izvješće
Ronny Bonillo
25. kolovoza 2015 16:58
Nema na čemu Nestor1, hvala vam na komentaru! Što se tiče vašeg pitanja, preporučujem vam da se uskoro vratite jer će se u sljedećih nekoliko sati sadržaj ovog vodiča ažurirati dodavanjem .zipa na kraju kako biste mogli preuzeti kôd.
- izvješće
Eneko
25. kolovoza 2015 17:06
Nema na čemu Nestor1, hvala vam na komentaru! Što se tiče vašeg pitanja, preporučujem vam da se uskoro vratite jer će se u sljedećih nekoliko sati sadržaj ovog vodiča ažurirati dodavanjem .zipa na kraju kako biste mogli preuzeti kôd.
I ja ću biti pažljiv, učinak je spektakularan i nevjerojatan. hvala unaprijed.
- izvješće
Ronny Bonillo
25. kolovoza 2015 17:07
Nema na čemu Eneko …
- izvješće
Aleksandar Teba
25. kolovoza 2015 17:13
Dobro jutro prijatelji, hvala na podršci, super je što vam se svidjelo jer je ovo jedan od moja prva 3 vodiča na web mjestu i zaista nisam očekivao pozitivne odgovore tako brzo, u vezi vašeg pitanja Juan Carlos, naravno da hoću. ovdje neko vrijeme objavljujem nove upute svaki tjedan nadam se da vam se sviđaju i da me podržavate svojim komentarima i ocjenama … pozdrav iz Venezuele …
Koliko brzo !!
Hvala Ronny, ne znaš koliko mi je dobro što si podijelio kôd.
Puno vam hvala programer!
ps: pratim te.
- izvješće
Ronny Bonillo
25. kolovoza 2015 17:19
nema na čemu alejandro, hvala ti na podršci!
- izvješće
Nestor1
25. kolovoza 2015 17:25
Nema na čemu Nestor1, hvala vam na komentaru! Što se tiče vašeg pitanja, preporučujem vam da se uskoro vratite jer će se u sljedećih nekoliko sati sadržaj ovog vodiča ažurirati dodavanjem .zipa na kraju kako biste mogli preuzeti kôd.
Hvala vam puno što ste priložili datoteku Ronny. I dobro došli u Solvetic.
- izvješće
Carlos Sanz
02. rujna 2015. 16:14
Testiram ga, hvala što ste priložili Ronnyja.
- izvješće
Ronny Bonillo
02. rujna 2015. 21:43
nema na čemu Carlos
- izvješće
Fiore nella
08. rujna 2015. 16:25
Hvala na prilogu !! jako cool.
- izvješće
Ronny Bonillo
08. rujna 2015. 16:37
Nema na čemu Fiore 
- izvješće
Reneé Toapanta García
02. lipnja 2016 21:58
Dobro jutro, tema je vrlo elegantna, ali ne mogu je preuzeti, uvijek me iznova traži da se identificiram i odatle me neće pustiti. Ako mi možete pomoći, zahvaljujem vam se na milijun.
- izvješće
Julio Martinez
Srpnja 262021-2022 20:03
Ne vidim .zip datoteku za prikaz koda
- izvješće
aldo1982
Srpnja 292021-2022 05:22
vrlo dobro, ali ne vidim .zip za preuzimanje codega.
Slds
- izvješće
Manelly
Rujna 132021-2022 12:58
Dobro…
Super objašnjenje i prezentacija Ronny Isto kao i zadnji komentatori … Gdje je veza za preuzimanje koda?
Hvala i pozdrav,
Nelly.
- izvješće
- Stvorite računBESPLATNO se prijavite za svoj Solvetic računRegistrirajte račun
- IdentificiratiImate li već račun? Prijavite se ovdjeIdentificirajte me na svom računu
