Hvad har vi brug for?
til. Selvom vi ikke har brug for en lokal server installeret for at arbejde med .html -filer, anbefaler jeg at installere en for at have alle vores filer organiseret i et bibliotek og for at kunne arbejde mere komfortabelt, hvis vi senere vil tilføje PHP -kode, i dette tilfælde I vil bruge Xampp Server, kan du downloade fra https: //www.apachefr… g / es / index.html
b. Da vi skal lave et dias, skal vi bruge de billeder, som vi skal placere på det, de skal alle have nøjagtig samme størrelse i pixels, jeg vil bruge nogle med en størrelse på 1200 X 600.
c. En kode -editor efter eget valg, i dette tilfælde vil jeg bruge en kaldet "Beslag".
Lad os komme igang …
1. Da vi har installeret Xampp, går vi til biblioteket "C: / xampp / htdocs" og vi opretter en ny mappe, i dette tilfælde vil jeg kalde den "SliderShow_main", inde i den vil jeg oprette en anden mappe og kalde den "Billeder", der vil jeg placere de billeder, jeg vil bruge i diasshowet.
Klik på billedet for at forstørre det
2. Nu åbner vi vores kodeditor, vi går til menuen "Fil> Ny".
Klik på billedet for at forstørre det
Og i denne nye fil vil vi skrive koden Grundlæggende HTML.
Klik på billedet for at forstørre det
Vi gemmer denne fil med udvidelsen (.html) inde i den mappe, som vi oprettede i trin 1 "SliderShow_main".3. Senere tilføjer vi en titel til filen og de referencer til Bootstrap og jquery -filer, som vi skal bruge for at vores skyder kan fungere korrekt, vi har to muligheder for at downloade disse filer og have dem i mapper på vores websted inden for den lokale server eller vi kan tilføje dem fra internettet, hvilket ville spare os plads på vores server. Jeg vælger den anden mulighed, du vil se, hvordan du gør det i det næste billede …
Klik på billedet for at forstørre det
4. Senere tilføjer vi inden for de tohvortil vi vil tildele klasserne henholdsvis "container" og "col-md-12" som følger …
FORSTØRRE
Klik på billedet for at forstørre det
Disse tosom vi tilføjer, vil tjene, så vores skyder vises frem for alt tilgængelig plads på vores skærm.5. Nu hvor vi har forberedt vores kode, skal vi begynde at tilføje de elementer, der udgør diaset, lad os se …
Klik på billedet for at forstørre det
Som du kan se, har vi tilføjet en nysom vi kalder "carousel_1", og vi tildeler 2 klasser af bootstrap kaldet "carousel" og "slide". Bemærk, at begge er adskilt af et mellemrum, for at diaset også skal fungere, er det nødvendigt at tilføje attributten (data-ride = "karrusel").6. Inden for det foregående lag tilføjer vi en ordnet liste med klassen "karruselindikatorer", som hjælper os med at tilføje mængden af indikatorer, der svarer til vores billeder, i dette tilfælde vil vi bruge tre billeder, så vi vil have tre indikatorer, der starter fra "0".
Klik på billedet for at forstørre det
Bemærk, at7. Nu tilføjer vi emnerne med de billeder, der vises, lad os se koden, hvor du finder flere detaljer …
FORSTØRRE
Klik på billedet for at forstørre det
Efter at vi har skrevet alt, der er knyttet til det første element, kopierer og indsætter vi simpelthen alt efter den mængde, vi har brug for, under hensyntagen til, at vi skal ændre billedets sti, og at de andre elementer ikke må indeholde klassen "aktiv" .
FORSTØRRE
Klik på billedet for at forstørre det
Som du kan se, har vi allerede tilføjet de 3 elementer med vores 3 billeder, og vores kode er funktionel, men nu tilføjer vi kontrolelementer (forrige og næste) for at flytte frem og tilbage mellem vores billeder, og vi vil også tilføje nogle ikoner. Efterlader vores endelige kode som følger …
FORSTØRRE
Klik på billedet for at forstørre det
Hvis vi følger trinene korrekt, kan vi i vores browser se følgende resultater …
FORSTØRRE
Klik på billedet for at forstørre det
Kan du lide og hjælpe denne vejledning?Du kan belønne forfatteren ved at trykke på denne knap for at give ham et positivt punkt
Hjalp denne tutorial dig?
Hvis ikkeHJÆLP FORBEDR DENNE TUTORIAL!
Tror du, at du kan rette eller forbedre denne vejledning? Du kan sende din udgave med de ændringer, du anser for nyttige.0 brugere har redigeret denne vejledning. Rediger og bliv en anerkendt ekspert!
Rediger denne vejledning
LIGNENDE VEJLEDNINGER
HTML5 formularer og egenskaberHTML5 og CSS3: Relations- og CSS3 -attributterHTML5 og CSS3 Første trin: Almindelige elementer i webdesignOpskriftskabelon med HTML5 og CSS3HTML5 og CSS3: Første trinOpret Twitter -kort til brugere, der bruger HTML5 og CSS3Vandret bjælke med svæveeffekt i html5, css3 og bootstrapFå klientkoordinater med Google Maps API i JavaScript (HMTL5, CSS3 og Bootstrap)
18 kommentarer
Juan Carlos
25. aug 2015 11:08
Ikke for at give dig en positiv pointe. Fantastisk tutorial, vil du lave mere Ronny ???
tak for din tutorial.
- Rapport
Nestor 1
25. august 2015 11:34
Jeg elskede også selvstudiet, tak Ronny, bare et spørgsmål: Har du en zip -fil til at tage eksemplet på koden? Det ville være fantastisk, hvis du har lyst. Tak skal du have!!
- Rapport
Alexander Teba
25. aug 2015 16:26
Stor effekt. Jeg analyserer det.
Jeg slutter mig til, hvad de andre siger, hvis du havde en fil med koden til at teste, ville det være fantastisk.
tak skal du have
- Rapport
Ronny Bonillo
25. aug 2015 16:54
Godmorgen venner, tak for støtten, det er dejligt, at du kunne lide det, fordi dette er en af mine første 3 tutorials på webstedet, og jeg havde virkelig ikke forventet positive svar så hurtigt, angående dit spørgsmål Juan Carlos, selvfølgelig vil jeg. her for et stykke tid at sende nye tutorials hver uge, jeg håber, at du kan lide dem, og at du støtter mig med dine kommentarer og evalueringer … Hilsener fra Venezuela …
- Rapport
Ronny Bonillo
25. aug 2015 16:58
Du er velkommen Nestor1, tak fordi du kommenterede! Med hensyn til dit spørgsmål, anbefaler jeg, at du vender tilbage snart, for i løbet af de næste timer opdateres indholdet af denne vejledning ved at tilføje en .zip til sidst, så du kan downloade koden.
- Rapport
Eneko
25. august 2015 17:06
Du er velkommen Nestor1, tak fordi du kommenterede! Med hensyn til dit spørgsmål, anbefaler jeg, at du vender tilbage snart, for i løbet af de næste timer opdateres indholdet af denne vejledning ved at tilføje en .zip til sidst, så du kan downloade koden.
Jeg vil også være opmærksom, effekten er spektakulær og fantastisk. tak på forhånd.
- Rapport
Ronny Bonillo
25. aug 2015 17:07
Velkommen Eneko …
- Rapport
Alexander Teba
25. aug 2015 17:13
Godmorgen venner, tak for støtten, det er dejligt, at du kunne lide det, fordi dette er en af mine første 3 tutorials på webstedet, og jeg havde virkelig ikke forventet positive svar så hurtigt, angående dit spørgsmål Juan Carlos, selvfølgelig vil jeg. her for et stykke tid at sende nye tutorials hver uge, jeg håber, at du kan lide dem, og at du støtter mig med dine kommentarer og evalueringer … Hilsener fra Venezuela …
Hvor hurtigt !!
Tak Ronny, du ved ikke, hvor godt det er for mig, at du delte koden.
Mange tak udvikler!
ps: jeg følger dig.
- Rapport
Ronny Bonillo
25. aug 2015 17:19
du er velkommen alejandro, tak for din støtte!
- Rapport
Nestor 1
25. aug 2015 17:25
Du er velkommen Nestor1, tak fordi du kommenterede! Med hensyn til dit spørgsmål anbefaler jeg, at du vender tilbage snart, for i løbet af de næste par timer vil indholdet af denne vejledning blive opdateret ved at tilføje en .zip i slutningen, så du kan downloade koden.
Mange tak for at vedhæfte Ronny -filen. Og velkommen til Solvetic.
- Rapport
Carlos Sanz
02. sep 2015 16:14
Jeg tester det, tak fordi du vedhæftede Ronny.
- Rapport
Ronny Bonillo
02. sep 2015 21:43
du er velkommen Carlos
- Rapport
Fiore nella
08. sep 2015 16:25
Tak for vedhæftningen !! meget sejt.
- Rapport
Ronny Bonillo
08. sep 2015 16:37
Du er velkommen Fiore 
- Rapport
Reneé Toapanta García
2. juni 2016 21:58
Godmorgen, temaet er meget elegant, men jeg kan ikke downloade det, det beder mig igen og igen om at identificere mig, og det vil ikke lade mig gå derfra. Hvis du kunne hjælpe mig, takker jeg en million.
- Rapport
Julio Martinez
Juli 262021-2022 20:03
Jeg kan ikke se .zip -filen for at se koden
- Rapport
aldo1982
Jul 292021-2022 05:22
meget godt, men jeg kan ikke se .zip for at downloade codego.
Slds
- Rapport
Manelly
Sep 132021-2022 12:58
Godt…
Super forklaring og præsentation Ronny Samme som de sidste kommentatorer … Hvor er linket til at downloade koden?
Tak og hilsner,
Nelly.
- Rapport
- Opret kontoTilmeld dig GRATIS for at få din Solvetic -kontoRegistrer en konto
- IdentificereHar du allerede en konto? Log ind herIdentificer mig på min konto
