Vad behöver vi?
till. Även om vi inte behöver installera en lokal server för att arbeta med .html -filer, rekommenderar jag att du installerar en för att ha alla våra filer organiserade i en katalog och för att kunna arbeta mer bekvämt om vi senare vill lägga till PHP -kod, i det här fallet I kommer att använda Xampp Server kan du ladda ner från https: //www.apachefr… g / es / index.html
b. Eftersom vi ska göra en bild behöver vi de bilder som vi ska placera på den, de måste alla ha exakt samma storlek i pixlar, jag kommer att använda några med en storlek på 1200 X 600.
c. En valfri kodredigerare, i det här fallet kommer jag att använda en kallad "Fästen".
Låt oss börja …
1. Eftersom vi har installerat Xampp går vi till katalogen "C: / xampp / htdocs" och vi skapar en ny mapp, i det här fallet kommer jag att kalla den "SliderShow_main", inuti den ska jag skapa en annan mapp och kalla den "Bilder", där kommer jag att placera bilderna som jag kommer att använda i bildspelet.
Klicka på bilden för att förstora den
2. Nu öppnar vi vår kodredigerare, vi går till menyn "Arkiv> Ny".
Klicka på bilden för att förstora den
Och i den här nya filen skriver vi koden Bas HTML.
Klicka på bilden för att förstora den
Vi kommer att spara den här filen med tillägget (.html) i mappen som vi skapade i steg 1 "SliderShow_main".3. Senare kommer vi att lägga till en titel för filen och de referenser till Bootstrap och jquery -filer som vi behöver för att reglaget ska fungera korrekt, vi har två alternativ för att ladda ner dessa filer och ha dem i mappar på vår webbplats på den lokala servern eller så kan vi lägga till dem från webben, vilket skulle spara oss utrymme på vår server. Jag väljer det andra alternativet, du kommer att se hur du gör det i nästa bild …
Klicka på bilden för att förstora den
4. Senare kommer vi att lägga till inom de tvåtill vilka vi kommer att tilldela klasserna "container" respektive "col-md-12" enligt följande …
FÖRSTORA
Klicka på bilden för att förstora den
De här tvåsom vi lägger till kommer att fungera så att vår reglage visas framför allt tillgängligt utrymme på vår skärm.5. Nu när vi har förberett vår kod ska vi börja lägga till elementen som kommer att bilda bilden, låt oss se …
Klicka på bilden för att förstora den
Som ni ser har vi lagt till en nysom vi kallar "carousel_1" och vi tilldelar 2 klasser av bootstrap som kallas "carousel" och "slide", observera att båda är åtskilda med ett mellanslag, dessutom är det nödvändigt att lägga till attributet för att bilden ska fungera (data-ride = "karusell").6. Inom föregående lager kommer vi att lägga till en ordnad lista med klassen "karusellindikatorer" som hjälper oss att lägga till mängden indikatorer som motsvarar våra bilder, i det här fallet kommer vi att använda tre bilder så att vi kommer att ha tre indikatorer från och med "0".
Klicka på bilden för att förstora den
Observera att7. Nu lägger vi till objekten med bilderna som kommer att visas, låt oss se koden där du hittar mer information …
FÖRSTORA
Klicka på bilden för att förstora den
Efter att vi har skrivit allt som är kopplat till det första objektet, kopierar och klistrar vi helt enkelt efter den mängd objekt vi behöver, med hänsyn till att vi måste ändra bildens sökväg och att de andra objekten inte får innehålla den "aktiva" klassen .
FÖRSTORA
Klicka på bilden för att förstora den
Som du kan se har vi redan lagt till de 3 objekten med våra 3 bilder och vår kod är funktionell, men nu kommer vi att lägga till kontrollelement (Föregående och nästa) för att flytta fram och tillbaka mellan våra bilder och vi kommer också att lägga till några ikoner. Lämna vår slutkod enligt följande …
FÖRSTORA
Klicka på bilden för att förstora den
Om vi följer stegen korrekt kan vi i vår webbläsare se följande resultat …
FÖRSTORA
Klicka på bilden för att förstora den
Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng
Hjälpte denna handledning dig?
Om inteHJÄLP FÖRBÄTTRA DENNA HANDBOK!
Tror du att du kan korrigera eller förbättra den här självstudien? Du kan skicka din utgåva med de ändringar som du anser vara användbara.0 användare har redigerat den här självstudien. Redigera och bli en erkänd expert!
Redigera denna handledning
Liknande handledning
HTML5 Forms -egenskaper och attributHTML5 och CSS3: Relations- och CSS3 -attributHTML5 och CSS3 första steg: Vanliga element i webbdesignReceptmall med HTML5 och CSS3HTML5 och CSS3: Första stegenSkapa Twitter -kort för användare som använder HTML5 och CSS3Horisontell stapel med sveveffekt i html5, css3 och bootstrapFå klientkoordinater med Google Maps API i JavaScript (HMTL5, CSS3 och Bootstrap)
18 kommentarer
Juan Carlos
25 aug 2015 11:08
Inte för att ge dig en positiv poäng. Bra handledning, ska du göra mer Ronny ???
tack för din handledning.
- Rapportera
Nestor1
25 aug 2015 11:34
Jag älskade också handledningen, tack Ronny, bara en fråga: Har du en zip -fil för att ta exemplet med koden? Det skulle vara bra om du känner för det. Tack!!
- Rapportera
Alexander Teba
25 aug 2015 16:26
Stor effekt. Jag analyserar det.
Jag går med på vad de andra säger, om du hade en fil med koden för att testa skulle det vara bra.
Tack
- Rapportera
Ronny Bonillo
25 aug 2015 16:54
God morgon vänner, tack för stödet, det är bra att du gillade det eftersom det här är en av mina tre första självstudier på sajten och jag förväntade mig verkligen inte positiva svar så snabbt, angående din fråga Juan Carlos, naturligtvis kommer jag att göra det. här ett tag och lägger ut nya självstudier varje vecka jag hoppas att du gillar dem och att du stöder mig med dina kommentarer och utvärderingar … Hälsningar från Venezuela …
- Rapportera
Ronny Bonillo
25 aug 2015 16:58
Du är välkommen Nestor1, tack för att du kommenterar! När det gäller din fråga rekommenderar jag att du kommer tillbaka snart, för inom de närmaste timmarna kommer innehållet i denna handledning att uppdateras genom att lägga till ett .zip i slutet så att du kan ladda ner koden.
- Rapportera
Eneko
25 aug 2015 17:06
Du är välkommen Nestor1, tack för att du kommenterar! När det gäller din fråga rekommenderar jag att du kommer tillbaka snart, för inom de närmaste timmarna kommer innehållet i denna handledning att uppdateras genom att lägga till ett .zip i slutet så att du kan ladda ner koden.
Jag kommer också att vara uppmärksam, effekten är spektakulär och fantastisk. Tack på förhand.
- Rapportera
Ronny Bonillo
25 aug 2015 17:07
Du är välkommen Eneko …
- Rapportera
Alexander Teba
25 aug 2015 17:13
God morgon vänner, tack för stödet, det är bra att du gillade det eftersom det här är en av mina tre första självstudier på sajten och jag förväntade mig verkligen inte positiva svar så snabbt, angående din fråga Juan Carlos, naturligtvis kommer jag att göra det. här ett tag och lägger ut nya självstudier varje vecka jag hoppas att du gillar dem och att du stöder mig med dina kommentarer och utvärderingar … Hälsningar från Venezuela …
Hur snabbt !!
Tack Ronny, du vet inte hur bra det är för mig att du delade koden.
Tack så mycket utvecklare!
ps: jag följer dig.
- Rapportera
Ronny Bonillo
25 aug 2015 17:19
du är välkommen alejandro, tack för ditt stöd!
- Rapportera
Nestor1
25 aug 2015 17:25
Du är välkommen Nestor1, tack för att du kommenterar! När det gäller din fråga rekommenderar jag att du kommer tillbaka snart, för inom de närmaste timmarna kommer innehållet i denna handledning att uppdateras genom att lägga till ett .zip i slutet så att du kan ladda ner koden.
Tack så mycket för att du bifogar Ronny -filen. Och välkommen till Solvetic.
- Rapportera
Carlos Sanz
02 sep 2015 16:14
Jag testar det, tack för att du bifogade Ronny.
- Rapportera
Ronny Bonillo
02 sep 2015 21:43
välkommen Carlos
- Rapportera
Fiore nella
08 sep 2015 16:25
Tack för bilagan !! väldigt coolt.
- Rapportera
Ronny Bonillo
08 sep 2015 16:37
Du är välkommen Fiore 
- Rapportera
Reneé Toapanta García
02 juni 2016 21:58
God morgon, temat är väldigt elegant men jag kan inte ladda ner det, det ber mig om och om igen att identifiera mig och det släpper mig inte därifrån. Om du kunde hjälpa mig tackar jag en miljon.
- Rapportera
Julio Martinez
Jul 262021-2022 20:03
Jag ser inte .zip -filen för att se koden
- Rapportera
aldo1982
Jul 292021-2022 05:22
mycket bra, men jag ser inte .zip för att ladda ner codego.
Slds
- Rapportera
Manelly
Sep 132021-2022 12:58
Bra…
Superförklaring och presentation Ronny Samma som de senaste kommentarerna … Var är länken för att ladda ner koden?
Tack och hälsningar,
Nelly.
- Rapportera
- Skapa kontoRegistrera dig GRATIS för att få ditt Solvetic -kontoRegistrera ett konto
- IdentifieraHar du redan ett konto? Logga in härIdentifiera mig på mitt konto
