Ko mums reikia?
į. Nors norint dirbti su .html failais mums nereikia įdiegti vietinio serverio, rekomenduoju jį įdiegti, kad visi failai būtų sutvarkyti kataloge ir būtų patogiau dirbti, jei vėliau norime pridėti PHP kodą, šiuo atveju aš naudosite „Xampp Server“, galite atsisiųsti iš https: //www.apachefr… g / es / index.html
b. Kadangi ketiname padaryti skaidrę, mums reikės vaizdų, kuriuos ketiname įdėti į ją, jie visi turi būti lygiai tokio paties dydžio pikseliais, kai kuriuos naudosiu 1200 x 600 dydžio.
c. Jūsų pasirinktas kodų redaktorius, šiuo atveju naudosiu tą, kuris vadinamas "Kronšteinai".
Pradėkime …
1. Kadangi įdiegėme „Xampp“, einame į katalogą „C: / xampp / htdocs“ ir mes sukuriame naują aplanką, šiuo atveju aš jį pavadinsiu „SliderShow_main“, jo viduje sukursiu kitą aplanką ir paskambinsiu "Vaizdai", ten įdėsiu vaizdus, kuriuos naudosiu skaidrių demonstracijoje.
Norėdami padidinti vaizdą, spustelėkite jį
2. Dabar atidarysime savo kodų redaktorių, eisime į meniu „Failas> Naujas“.
Norėdami padidinti vaizdą, spustelėkite jį
Ir šiame naujame faile mes parašysime kodą Bazinis HTML.
Norėdami padidinti vaizdą, spustelėkite jį
Šį failą su plėtiniu (.html) išsaugosime aplanke, kurį sukūrėme atlikdami 1 veiksmą „SliderShow_main“.3. Vėliau pridėsime failo pavadinimą ir nuorodas į „Bootstrap“ ir „jquery“ failus, kurių mums prireiks, kad mūsų slankiklis veiktų tinkamai. Turime dvi parinktis, kaip atsisiųsti šiuos failus ir turėti juos mūsų svetainės aplankuose vietiniame serveryje arba galime juos pridėti iš žiniatinklio, o tai sutaupytų vietos mūsų serveryje. Aš pasirinksiu antrąjį variantą, kaip tai padaryti, pamatysite kitame paveikslėlyje …
Norėdami padidinti vaizdą, spustelėkite jį
4. Vėliau mes pridėsime per dukuriai atitinkamai priskirsime klases „konteineris“ ir „col-md-12“ …
DIDELIS
Norėdami padidinti vaizdą, spustelėkite jį
Šie duPridėti bus naudojami taip, kad mūsų slankiklis būtų rodomas virš visų esamų vietų mūsų ekrane.5. Dabar, kai paruošėme savo kodą, pradėsime pridėti elementus, kurie sudarys skaidrę, pažiūrėkime …
Norėdami padidinti vaizdą, spustelėkite jį
Kaip matote, pridėjome naująkurį vadiname „karuselė_1“ ir priskiriame 2 įkrovos klasės klases, pavadintas „karuselė“ ir „skaidrė“, atkreipkite dėmesį, kad abi yra atskirtos tarpais, papildomai, kad skaidrė veiktų, būtina pridėti atributą („data-ride“ = „karuselė“).6. Ankstesniame sluoksnyje mes pridėsime užsakytą sąrašą su „karuselės indikatoriais“, kuris padės mums pridėti rodiklių, atitinkančių mūsų atvaizdus, kiekį, šiuo atveju naudosime tris vaizdus, todėl turėsime tris rodiklius, pradedant nuo "0".
Norėdami padidinti vaizdą, spustelėkite jį
Atkreipkite dėmesį, kad7. Dabar pridėsime elementus su vaizdais, kurie bus rodomi, pažiūrėkime kodą, kuriame rasite daugiau informacijos …
DIDELIS
Norėdami padidinti vaizdą, spustelėkite jį
Parašę viską, kas susiję su pirmuoju elementu, mes tiesiog nukopijuojame ir įklijuojame pagal reikalingą elemento kiekį, atsižvelgdami į tai, kad turime pakeisti vaizdo kelią ir kad kituose elementuose neturi būti „aktyvios“ klasės .
DIDELIS
Norėdami padidinti vaizdą, spustelėkite jį
Kaip matote, mes jau pridėjome 3 elementus su 3 vaizdais ir mūsų kodas yra funkcionalus, tačiau dabar pridėsime valdymo elementų („Ankstesnis ir kitas“), kad galėtume judėti pirmyn ir atgal tarp mūsų vaizdų, taip pat pridėsime keletą piktogramų. Paliekame galutinį kodą taip …
DIDELIS
Norėdami padidinti vaizdą, spustelėkite jį
Jei teisingai atliksime veiksmus, savo naršyklėje galime matyti šiuos rezultatus …
DIDELIS
Norėdami padidinti vaizdą, spustelėkite jį
Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką
Ar ši pamoka jums padėjo?
Jei nePADĖKITE TOBULINTI PAMOKĄ!
Ar manote, kad galite pataisyti ar patobulinti šią mokymo programą? Galite išsiųsti leidimą su pakeitimais, kurie, jūsų nuomone, yra naudingi.0 vartotojų redagavo šią mokymo programą. Redaguokite ir tapkite pripažinta eksperte!
Redaguokite šią mokymo programą
PANAŠŪS PAMOKOS
HTML5 formų ypatybės ir atributaiHTML5 ir CSS3: santykiai ir CSS3 atributaiPirmieji HTML5 ir CSS3 žingsniai: bendri žiniatinklio dizaino elementaiRecepto šablonas su HTML5 ir CSS3HTML5 ir CSS3: pirmieji žingsniaiSukurkite „Twitter“ kortelę vartotojams, naudojantiems HTML5 ir CSS3Horizontali juosta su užvedimo efektu html5, css3 ir įkrovos juostojeGaukite klientų koordinates naudodami „Google“ žemėlapių API „JavaScript“ (HMTL5, CSS3 ir „Bootstrap“)
18 komentarų
Juanas Carlosas
2015 m. Rugpjūčio 25 d. 11:08
Negalima duoti jums teigiamo taško. Puiki pamoka, ar ketini nuveikti daugiau Ronny ???
ačiū už pamoką.
- Ataskaita
Nestoras 1
2015 m. Rugpjūčio 25 d. 11:34
Man taip pat patiko pamoka, ačiū Ronny, tik vienas klausimas: ar turite ZIP failą, kad imtumėte kodo pavyzdį? Būtų puiku, jei taip jaustumėtės. Ačiū!!
- Ataskaita
Aleksandras Teba
2015 m. Rugpjūčio 25 d. 16:26
Puikus efektas. Aš tai analizuoju.
Prisidedu prie to, ką sako kiti, jei turėtumėte failą su kodu, kurį išbandytumėte, būtų puiku.
Ačiū
- Ataskaita
Ronny Bonillo
2015 m. Rugpjūčio 25 d. 16:54
Labas rytas draugai, ačiū už palaikymą, puiku, kad jums patiko, nes tai yra viena iš mano pirmųjų 3 pamokų svetainėje ir tikrai nesitikėjau taip greitai gauti teigiamų atsakymų į jūsų klausimą Juanas Carlosas. čia kurį laiką skelbiu naujas pamokas kiekvieną savaitę Tikiuosi, kad jums jos patinka ir palaikote mane savo komentarais ir vertinimais … Linkėjimai iš Venesuelos …
- Ataskaita
Ronny Bonillo
2015 m. Rugpjūčio 25 d. 16:58
Sveiki, „Nestor1“, ačiū, kad komentavote! Dėl jūsų klausimo rekomenduoju greitai sugrįžti, nes per kelias valandas šios pamokos turinys bus atnaujintas, pabaigoje pridėjus .zip, kad galėtumėte atsisiųsti kodą.
- Ataskaita
Eneko
2015 m. Rugpjūčio 25 d. 17:06
Sveiki, „Nestor1“, ačiū, kad komentavote! Dėl jūsų klausimo rekomenduoju greitai sugrįžti, nes per kelias valandas šios pamokos turinys bus atnaujintas, pabaigoje pridėjus .zip, kad galėtumėte atsisiųsti kodą.
Aš taip pat būsiu dėmesingas, efektas yra įspūdingas ir nuostabus. ačiū iš anksto.
- Ataskaita
Ronny Bonillo
2015 m. Rugpjūčio 25 d. 17:07
Sveikas, Eneko …
- Ataskaita
Aleksandras Teba
2015 m. Rugpjūčio 25 d. 17:13
Labas rytas draugai, ačiū už palaikymą, puiku, kad jums patiko, nes tai yra viena iš mano pirmųjų 3 pamokų šioje svetainėje ir tikrai nesitikėjau taip greitai gauti teigiamų atsakymų į jūsų klausimą, Juanas Carlosas, žinoma, kad taip. čia kurį laiką skelbiu naujas pamokas kiekvieną savaitę Tikiuosi, kad jums jos patiks ir palaikysite mane savo komentarais ir vertinimais … Linkėjimai iš Venesuelos …
Kaip greitai !!
Ačiū Ronny, tu nežinai, kaip man gerai, kad pasidalinai kodu.
Labai ačiū kūrėjui!
ps: seku tave.
- Ataskaita
Ronny Bonillo
2015 m. Rugpjūčio 25 d. 17:19
Sveiki, Alejandro, ačiū už palaikymą!
- Ataskaita
Nestoras 1
2015 m. Rugpjūčio 25 d., 17:25
Sveiki, „Nestor1“, ačiū, kad komentavote! Dėl jūsų klausimo rekomenduoju greitai sugrįžti, nes per kelias valandas šios pamokos turinys bus atnaujintas, pabaigoje pridėjus .zip, kad galėtumėte atsisiųsti kodą.
Labai ačiū, kad pridėjote Ronny failą. Ir sveiki atvykę į „Solvetic“.
- Ataskaita
Carlosas Sanzas
2015 m. Rugsėjo 02 d. 16:14
Bandau, ačiū, kad prisegei Ronny.
- Ataskaita
Ronny Bonillo
2015 m. Rugsėjo 02 d. 21:43
Sveikas, Karlosai
- Ataskaita
Fiore nella
2015 rugsėjo 08 16:25
Ačiū už priedą !! labai šaunu.
- Ataskaita
Ronny Bonillo
2015 rugsėjo 08 16:37
Sveiki, Fiore 
- Ataskaita
Reneé Toapanta García
2016 m. Birželio 02 d. 21:58
Labas rytas, tema yra labai elegantiška, bet negaliu jos atsisiųsti, ji vėl ir vėl prašo identifikuoti save ir neleidžia man eiti iš ten. Jei galėtumėte man padėti, ačiū milijonui.
- Ataskaita
Julio Martinezas
Liepos 262021-2022 20:03
Nematau .zip failo, kad matyčiau kodą
- Ataskaita
aldo1982 m
Liepos 292021-2022 05:22
labai gerai, bet nematau .zip, kad galėčiau atsisiųsti „codego“.
Slds
- Ataskaita
Maneliškas
Rugsėjo 132021-2022 12:58
Gerai…
Puikus paaiškinimas ir pristatymas Ronny Tas pats, kas paskutiniai komentatoriai … Kur yra nuoroda kodui atsisiųsti?
Ačiū ir linkėjimai,
Nelly.
- Ataskaita
- Sukurti paskyrąUžsiregistruokite NEMOKAMAI, kad gautumėte „Solvetic“ paskyrąUžregistruokite paskyrą
- NustatykiteAr jau turite paskyrą? Prisijunk čiaNustatykite mane savo paskyroje
