Kas mums vajadzīgs?
uz. Lai gan, lai strādātu ar .html failiem, mums nav jāinstalē vietējais serveris, es iesaku to instalēt, lai visi mūsu faili būtu sakārtoti direktorijā un varētu strādāt ērtāk, ja vēlāk vēlamies pievienot PHP kodu, šajā gadījumā es izmantos Xampp serveri, varat lejupielādēt no https: //www.apachefr… g / es / index.html
b. Tā kā mēs gatavosim slaidu, mums būs nepieciešami attēli, kurus mēs uz tā ievietosim, tiem visiem jābūt tieši vienāda izmēra pikseļos, es izmantošu dažus, kuru izmērs ir 1200 X 600.
c. Koda redaktors pēc jūsu izvēles, šajā gadījumā es izmantošu tādu, ko sauc "Kronšteini".
Sāksim …
1. Tā kā esam instalējuši Xampp, mēs ejam uz direktoriju "C: / xampp / htdocs" un mēs izveidojam jaunu mapi, šajā gadījumā es to saucu "SliderShow_main", tās iekšpusē izveidošu citu mapi un to izsaukšu "Attēli", tur es ievietošu attēlus, kurus izmantošu slaidrādē.
Noklikšķiniet uz attēla, lai to palielinātu
2. Tagad mēs atvērsim savu koda redaktoru, mēs ejam uz izvēlni "Fails> Jauns".
Noklikšķiniet uz attēla, lai to palielinātu
Un šajā jaunajā failā mēs ierakstīsim kodu Bāzes HTML.
Noklikšķiniet uz attēla, lai to palielinātu
Mēs saglabāsim šo failu ar paplašinājumu (.html) mapē, kuru izveidojām 1. darbībā "SliderShow_main".3. Vēlāk mēs pievienosim failam virsrakstu un atsauces uz Bootstrap un jquery failiem, kas mums būs nepieciešami, lai mūsu slīdnis darbotos pareizi. Mums ir divas iespējas, kā lejupielādēt šos failus un ievietot tos mūsu vietnes mapēs vietējā serverī vai arī mēs varam tos pievienot no tīmekļa, tādējādi ietaupot vietu mūsu serverī. Es izvēlos otro iespēju, jūs redzēsit, kā to izdarīt nākamajā attēlā …
Noklikšķiniet uz attēla, lai to palielinātu
4. Vēlāk mēs pievienosim aboskurām mēs piešķirsim klases "konteiners" un "col-md-12" attiecīgi šādi …
PALIELINĀT
Noklikšķiniet uz attēla, lai to palielinātu
Šie diviko mēs pievienosim, kalpos tā, lai mūsu slīdnis ekrānā tiktu parādīts virs pieejamās vietas.5. Tagad, kad esam sagatavojuši savu kodu, mēs sāksim pievienot elementus, kas veidos slaidu, redzēsim …
Noklikšķiniet uz attēla, lai to palielinātu
Kā redzat, esam pievienojuši jaunuko mēs saucam par “karuselis_1”, un mēs piešķiram 2 sāknēšanas siksnu klases ar nosaukumu “karuselis” un “slaids”, ņemiet vērā, ka abas ir atdalītas ar atstarpi, turklāt, lai slaids darbotos, ir jāpievieno atribūts (data-ride = "karuselis").6. Iepriekšējā slānī mēs pievienosim sakārtotu sarakstu ar klasi "karuselis-rādītāji", kas palīdzēs mums pievienot mūsu attēliem atbilstošo rādītāju daudzumu, šajā gadījumā mēs izmantosim trīs attēlus, tāpēc mums būs trīs rādītāji, sākot no "0".
Noklikšķiniet uz attēla, lai to palielinātu
Ņemiet vērā, ka7. Tagad mēs pievienosim vienumus ar attēliem, kas tiks parādīti, redzēsim kodu, kurā atradīsit sīkāku informāciju …
PALIELINĀT
Noklikšķiniet uz attēla, lai to palielinātu
Pēc tam, kad esam uzrakstījuši visu, kas saistīts ar pirmo vienumu, mēs vienkārši kopējam un ielīmējam atbilstoši vajadzīgajam vienuma daudzumam, ņemot vērā, ka mums ir jāmaina attēla ceļš un ka pārējie vienumi nedrīkst saturēt klasi "aktīvā" .
PALIELINĀT
Noklikšķiniet uz attēla, lai to palielinātu
Kā redzat, mēs jau esam pievienojuši 3 vienumus ar mūsu 3 attēliem, un mūsu kods ir funkcionāls, taču tagad mēs pievienosim vadības elementus (iepriekšējā un nākamā), lai pārvietotos starp attēliem un turp, un pievienosim arī dažas ikonas. Atstājot mūsu galīgo kodu šādi …
PALIELINĀT
Noklikšķiniet uz attēla, lai to palielinātu
Ja mēs pareizi izpildām darbības, mūsu pārlūkprogrammā mēs varam redzēt šādus rezultātus …
PALIELINĀT
Noklikšķiniet uz attēla, lai to palielinātu
Vai jums patika šī apmācība un palīdzējāt tai?Jūs varat apbalvot autoru, nospiežot šo pogu, lai sniegtu viņam pozitīvu punktu
Vai šī apmācība jums palīdzēja?
Ja nēPALĪDZIET UZLABOT ŠO PAMĀCĪBU!
Vai jūs domājat, ka varat labot vai uzlabot šo apmācību? Jūs varat nosūtīt izdevumu ar izmaiņām, kuras uzskatāt par noderīgām.0 lietotāji ir rediģējuši šo apmācību. Rediģējiet un kļūstiet par atzītu ekspertu!
Rediģēt šo pamācību
LĪDZĪGAS PAMĀCĪBAS
HTML5 veidlapu rekvizīti un atribūtiHTML5 un CSS3: attiecību un CSS3 atribūtiHTML5 un CSS3 Pirmie soļi: Web dizaina kopīgie elementiReceptes veidne ar HTML5 un CSS3HTML5 un CSS3: pirmie soļiIzveidojiet Twitter karti lietotājiem, kuri izmanto HTML5 un CSS3Horizontāla josla ar kursora efektu html5, css3 un bootstrapIegūstiet klientu koordinātas, izmantojot Google Maps API JavaScript (HMTL5, CSS3 un Bootstrap)
18 komentāri
Huans Karloss
2015. gada 25. augusts 11:08
Lai nedotu jums pozitīvu punktu. Lieliska apmācība, vai jūs darīsit vairāk Ronija ???
paldies par jūsu apmācību.
- Ziņot
Nestors 1
2015. gada 25. augusts 11:34
Man arī patika apmācība, paldies Ronij, tikai viens jautājums: vai jums ir zip fails, lai ņemtu koda piemēru? Būtu lieliski, ja tā justos. Paldies!!
- Ziņot
Aleksandrs Teba
2015. gada 25. augusts 16:26
Lielisks efekts. Es to analizēju.
Es pievienojos citu teiktajam, ja jums būtu fails ar kodu, lai to pārbaudītu, tas būtu lieliski.
Paldies
- Ziņot
Ronijs Bonillo
2015. gada 25. augusts 16:54
Labrīt, draugi, paldies par atbalstu, ir lieliski, ka jums tas patika, jo šī ir viena no manām pirmajām 3 apmācībām vietnē, un es tiešām negaidīju pozitīvas atbildes tik ātri attiecībā uz jūsu jautājumu Huans Karloss, protams, ka es to darīšu. šeit kādu laiku ievietoju jaunas apmācības katru nedēļu, es ceru, ka jums tās patīk un ka jūs mani atbalstāt ar saviem komentāriem un vērtējumiem … Sveicieni no Venecuēlas …
- Ziņot
Ronijs Bonillo
2015. gada 25. augusts 16:58
Laipni lūdzam Nestor1, paldies par komentāriem! Attiecībā uz jūsu jautājumu es iesaku jums drīz atgriezties, jo tuvāko stundu laikā šīs apmācības saturs tiks atjaunināts, beigās pievienojot .zip, lai varētu lejupielādēt kodu.
- Ziņot
Eneko
2015. gada 25. augusts 17:06
Esiet sveicināts, Nestor1, paldies par komentāriem! Attiecībā uz jūsu jautājumu es iesaku jums drīz atgriezties, jo tuvāko stundu laikā šīs apmācības saturs tiks atjaunināts, beigās pievienojot .zip, lai varētu lejupielādēt kodu.
Es arī būšu uzmanīgs, efekts ir iespaidīgs un pārsteidzošs. Paldies jau iepriekš.
- Ziņot
Ronijs Bonillo
2015. gada 25. augusts 17:07
Esiet laipni gaidīti, Eneko …
- Ziņot
Aleksandrs Teba
2015. gada 25. augusts 17:13
Labrīt, draugi, paldies par atbalstu, ir lieliski, ka jums tas patika, jo šī ir viena no manām pirmajām 3 apmācībām vietnē, un es tiešām negaidīju pozitīvas atbildes tik ātri attiecībā uz jūsu jautājumu Huans Karloss, protams, ka es to darīšu. šeit kādu laiku ievietoju jaunas apmācības katru nedēļu, es ceru, ka jums tās patīk un ka jūs mani atbalstāt ar saviem komentāriem un vērtējumiem … Sveicieni no Venecuēlas …
Cik ātri !!
Paldies Ronij, jūs nezināt, cik labi man ir, ka jūs kopīgojāt kodu.
Liels paldies izstrādātājam!
ps: es tev sekoju.
- Ziņot
Ronijs Bonillo
2015. gada 25. augusts 17:19
laipni lūdzam, Alejandro, paldies par atbalstu!
- Ziņot
Nestors 1
2015. gada 25. augusts 17:25
Laipni lūdzam Nestor1, paldies par komentāriem! Attiecībā uz jūsu jautājumu es iesaku jums drīz atgriezties, jo tuvāko stundu laikā šīs apmācības saturs tiks atjaunināts, beigās pievienojot .zip, lai varētu lejupielādēt kodu.
Liels paldies par Ronny faila pievienošanu. Un laipni lūdzam Solveticā.
- Ziņot
Karloss Sancs
2015. gada 2. septembris 16:14
Es to testēju, paldies, ka pievienojāt Roniju.
- Ziņot
Ronijs Bonillo
2015. gada 2. septembris 21:43
esi laipni gaidīts Karloss
- Ziņot
Fiore nella
2015. gada 8. septembris 16:25
Paldies par pielikumu !! ļoti foršs.
- Ziņot
Ronijs Bonillo
2015. gada 8. septembris 16:37
Laipni lūdzam, Fiore 
- Ziņot
Renē Toapanta Garsija
2016. gada 2. jūnijs 21:58
Labrīt, tēma ir ļoti eleganta, bet es nevaru to lejupielādēt, tā atkal un atkal lūdz sevi identificēt, un tas neļauj man iet no turienes. Ja jūs varētu man palīdzēt, es jums pateicos miljonu.
- Ziņot
Hulio Martiness
262021-2022 jūlijs 20:03
Es neredzu .zip failu, lai redzētu kodu
- Ziņot
aldo1982
292021-2022 jūlijs 05:22
ļoti labi, bet es neredzu .zip, lai lejupielādētu codego.
Slds
- Ziņot
Manelly
132021-2022 septembris 12:58
Labi…
Super paskaidrojums un prezentācija Ronny Tāpat kā pēdējie komentētāji … Kur ir saite, lai lejupielādētu kodu?
Paldies un pateicos,
Nelly.
- Ziņot
- Izveidot profiluReģistrējieties BEZMAKSAS, lai iegūtu savu Solvetic kontuReģistrējiet kontu
- IdentificējietVai jums jau ir konts? Pierakstieties šeitIdentificējiet mani savā kontā
