Hva trenger vi?
til. Selv om vi ikke trenger en lokal server installert for å jobbe med .html -filer, anbefaler jeg å installere en for å ha alle filene våre organisert i en katalog og for å kunne fungere mer komfortabelt hvis vi senere vil legge til PHP -kode, i dette tilfellet I vil bruke Xampp Server, kan du laste ned fra https: //www.apachefr… g / es / index.html
b. Siden vi skal lage et lysbilde, trenger vi bildene som vi skal plassere på den, de må alle ha nøyaktig samme størrelse i piksler, jeg vil bruke noen med en størrelse på 1200 X 600.
c. En kodeditor etter eget valg, i dette tilfellet vil jeg bruke en som heter "Braketter".
La oss komme i gang …
1. Siden vi har installert Xampp, går vi til katalogen "C: / xampp / htdocs" og vi lager en ny mappe, i dette tilfellet vil jeg kalle den "SliderShow_main", inni den vil jeg lage en annen mappe og kalle den "Bilder", der vil jeg plassere bildene som jeg vil bruke i lysbildeserien.
Klikk på bildet for å forstørre det
2. Nå åpner vi vår kodeditor, vi går til menyen "Fil> Ny".
Klikk på bildet for å forstørre det
Og i denne nye filen vil vi skrive koden Grunnleggende HTML.
Klikk på bildet for å forstørre det
Vi lagrer denne filen med utvidelsen (.html) inne i mappen som vi opprettet i trinn 1 "SliderShow_main".3. Senere vil vi legge til en tittel for filen og referansene til Bootstrap- og jquery -filene som vi trenger for at glidebryteren skal fungere korrekt, vi har to alternativer for å laste ned disse filene og ha dem i mapper på nettstedet vårt på den lokale serveren eller vi kan legge dem til fra nettet, noe som vil spare oss plass på serveren vår. Jeg vil velge det andre alternativet, du vil se hvordan du gjør det i neste bilde …
Klikk på bildet for å forstørre det
4. Senere vil vi legge til i de tosom vi vil tildele klassene henholdsvis "container" og "col-md-12" som følger …
FORSTØRRE
Klikk på bildet for å forstørre det
Disse tosom vi legger til vil tjene slik at glidebryteren vår vises over all tilgjengelig plass på skjermen.5. Nå som vi har forberedt koden vår, skal vi begynne å legge til elementene som vil utgjøre lysbildet, la oss se …
Klikk på bildet for å forstørre det
Som du kan se har vi lagt til en nysom vi kaller "carousel_1" og vi tildeler 2 klasser med bootstrap kalt "carousel" og "slide". Vær oppmerksom på at begge er atskilt med et mellomrom, i tillegg for at lysbildet skal fungere, er det nødvendig å legge til attributtet (data-ride = "karusell").6. I det forrige laget vil vi legge til en ordnet liste med klassen "karusellindikatorer" som vil hjelpe oss med å legge til mengden indikatorer som tilsvarer bildene våre, i dette tilfellet vil vi bruke tre bilder, så vi vil ha tre indikatorer som starter fra "0".
Klikk på bildet for å forstørre det
Vær oppmerksom på at7. Nå vil vi legge til elementene med bildene som skal vises, la oss se koden der du finner flere detaljer …
FORSTØRRE
Klikk på bildet for å forstørre det
Etter at vi har skrevet alt som er knyttet til det første elementet, kopierer og limer vi ganske enkelt i henhold til mengden element vi trenger, med tanke på at vi må endre banen til bildet og at de andre elementene ikke må inneholde den "aktive" klassen .
FORSTØRRE
Klikk på bildet for å forstørre det
Som du kan se har vi allerede lagt til de 3 elementene med våre 3 bilder, og koden vår er funksjonell, men nå vil vi legge til kontrollelementer (forrige og neste) for å flytte frem og tilbake mellom bildene våre, og vi vil også legge til noen ikoner. La vår siste kode være som følger …
FORSTØRRE
Klikk på bildet for å forstørre det
Hvis vi følger trinnene riktig, kan vi i nettleseren vår se følgende resultater …
FORSTØRRE
Klikk på bildet for å forstørre det
Likte og hjalp du denne opplæringen?Du kan belønne forfatteren ved å trykke på denne knappen for å gi ham et positivt poeng
Hjalp denne opplæringen deg?
Hvis ikkeHJELP FORBEDR DENNE VEILEDNINGEN!
Tror du at du kan korrigere eller forbedre denne opplæringen? Du kan sende utgaven din med endringene du anser som nyttige.0 brukere har redigert denne opplæringen. Rediger og bli en anerkjent ekspert!
Rediger denne opplæringen
LIKNE VEILEDNINGER
HTML5 Forms -egenskaper og -attributterHTML5 og CSS3: Relasjoner og CSS3 -attributterHTML5 og CSS3 Første trinn: Vanlige elementer i webdesignOppskriftsmal med HTML5 og CSS3HTML5 og CSS3: Første trinnLag Twitter -kort for brukere som bruker HTML5 og CSS3Horisontal stolpe med sveveeffekt i html5, css3 og bootstrapFå klientkoordinater med Google Maps API i JavaScript (HMTL5, CSS3 og Bootstrap)
18 kommentarer
Juan Carlos
25.august 2015 11:08
For ikke å gi deg et positivt poeng. Flott opplæring, kommer du til å gjøre mer Ronny ???
takk for opplæringen din.
- Rapportere
Nestor 1
25.august 2015 11:34
Jeg elsket også opplæringen, takk Ronny, bare ett spørsmål: Har du en zip -fil for å ta eksemplet på koden? Det ville være flott hvis du føler for det. Takk skal du ha!!
- Rapportere
Alexander Teba
25.august 2015 16:26
Stor effekt. Jeg analyserer det.
Jeg slutter meg til det de andre sier, hvis du hadde en fil med koden for å teste det ville være flott.
Takk skal du ha
- Rapportere
Ronny Bonillo
25.august 2015 16:54
God morgen venner, takk for støtten, det er flott at du likte det fordi dette er en av mine tre første opplæringsprogrammer på nettstedet, og jeg hadde virkelig ikke forventet positive svar så raskt, angående spørsmålet ditt Juan Carlos, selvfølgelig vil jeg gjøre det. her en stund og legger ut nye opplæringsprogrammer hver uke. Jeg håper du liker dem og at du støtter meg med dine kommentarer og evalueringer … Hilsen fra Venezuela …
- Rapportere
Ronny Bonillo
25.august 2015 16:58
Du er velkommen Nestor1, takk for at du kommenterer! Når det gjelder spørsmålet ditt, anbefaler jeg at du kommer tilbake snart, for i løpet av de neste timene vil innholdet i denne opplæringen oppdateres ved å legge til en .zip på slutten slik at du kan laste ned koden.
- Rapportere
Eneko
25.august 2015 17:06
Du er velkommen Nestor1, takk for at du kommenterer! Når det gjelder spørsmålet ditt, anbefaler jeg at du kommer tilbake snart, for i løpet av de neste timene vil innholdet i denne opplæringen oppdateres ved å legge til en .zip på slutten slik at du kan laste ned koden.
Jeg vil også være oppmerksom, effekten er spektakulær og fantastisk. takk på forhånd.
- Rapportere
Ronny Bonillo
25.august 2015 17:07
Du er velkommen Eneko …
- Rapportere
Alexander Teba
25.august 2015 17:13
God morgen venner, takk for støtten, det er flott at du likte det fordi dette er en av mine tre første opplæringsprogrammer på nettstedet, og jeg hadde virkelig ikke forventet positive svar så raskt, angående spørsmålet ditt Juan Carlos, selvfølgelig vil jeg gjøre det. her en stund og legger ut nye opplæringsprogrammer hver uke. Jeg håper du liker dem, og at du støtter meg med dine kommentarer og evalueringer … Hilsen fra Venezuela …
Hvor fort !!
Takk Ronny, du vet ikke hvor godt det er for meg at du delte koden.
Tusen takk utvikler!
ps: jeg følger deg.
- Rapportere
Ronny Bonillo
25.august 2015 17:19
du er velkommen alejandro, takk for din støtte!
- Rapportere
Nestor 1
25.august 2015 17:25
Du er velkommen Nestor1, takk for at du kommenterer! Når det gjelder spørsmålet ditt, anbefaler jeg at du kommer tilbake snart, for i løpet av de neste timene vil innholdet i denne opplæringen oppdateres ved å legge til en .zip på slutten slik at du kan laste ned koden.
Tusen takk for at du legger ved Ronny -filen. Og velkommen til Solvetic.
- Rapportere
Carlos Sanz
02. sep 2015 16:14
Jeg tester det, takk for at du legger ved Ronny.
- Rapportere
Ronny Bonillo
2. sep 2015 21:43
velkommen Carlos
- Rapportere
Fiore nella
08. sep 2015 16:25
Takk for vedlegg !! veldig kult.
- Rapportere
Ronny Bonillo
08. sep 2015 16:37
Du er velkommen Fiore 
- Rapportere
Reneé Toapanta García
2. juni 2016 21:58
God morgen, temaet er veldig elegant, men jeg kan ikke laste det ned, det ber meg igjen og igjen om å identifisere meg, og det lar meg ikke gå derfra. Hvis du kunne hjelpe meg, takker jeg en million.
- Rapportere
Julio Martinez
Juli 262021-2022 20:03
Jeg ser ikke zip -filen for å se koden
- Rapportere
aldo1982
Jul 292021-2022 05:22
veldig bra, men jeg ser ikke .zip for å laste ned codego.
Slds
- Rapportere
Manelly
Sep 132021-2022 12:58
Flink…
Super forklaring og presentasjon Ronny Samme som de siste kommentarene … Hvor er lenken for å laste ned koden?
Takk og hilsen,
Nelly.
- Rapportere
- Opprett kontoRegistrer deg GRATIS for å ha din Solvetic -kontoRegistrer en konto
- IdentifisereHar du allerede en konto? Logg deg på herIdentifiser meg på kontoen min
