Share
En av Twitter Bootstraps mange praktiske funksjoner er en behagelig glidende karusell for å gi bilder og innhold! Oppsett er ikke vanskelig. Det krever noe strukturert oppslag, Bootstrap jQuery-plugin, og et par linjer med JavaScript for å initialisere det. La meg vise deg hvordan det er gjort!
Alternativt kan du laste ned videoen eller abonnere på Webdesigntuts + screencasts via iTunes eller YouTube!
For de av dere som setter pris på opplæring i svart og hvitt, la oss gå over:
Den Bootstrap karusellen krever et bestemt oppslagsmønster, med passende klasser.
‹ ›
Teksttekst her
Teksttekst her
Teksttekst her
Teksttekst her
Når vi har levert merket, må vi initialisere karusell JavaScript for å gjøre sitt arbeid på denne karusellen.
La oss begynne med å sørge for at nødvendig JavaScript er koblet til denne siden. Du finner JavaScript-koblingene nær bunnen av siden, nær den avsluttende kroppstegnet.
Den beste, mest anbefalte måten å knytte jQuery, er å koble til en CDN-vert versjon. Dette gir en raskere nedlasting, og den kan allerede være cached i brukerens nettleser.
Men selvfølgelig ville det være fint å ha en tilbakekalling, slik at hvis noe skjer med den CDN-vert-versjonen, kan brukeren få den lokalt fra dine egne webfiler. Det er akkurat det gode folk på HTML5 Boilerplate anbefaler, og det ser slik ut:
Vær oppmerksom på at den første linjen når ut til Googles vertsversjon. Den andre linjen bruker JavaScript for å kontrollere at den første linjen gjorde jobben sin. Hvis ikke, genererer den automatisk en kobling til din egen vertskapskopi av jQuery, som du har tatt med i dine egne webfiler (som jeg har her).
Når vi har koblet jQuery, trenger vi Bootstraps jQuery-plugins. Jeg har tatt med hele kompilert og minifisert versjon av alle Bootstraps plugins. Dermed ser lenken slik ut:
Når vi har gitt jQuery Plus Bootstraps plugins, trenger vi bare å initialisere karusellpluggen for å gjøre sitt arbeid på vår karusell.
På vanlig engelsk betyr dette: Når HTML-dokumentet er klart, identifiser elementet / elementene med en klasse av "Karusell", og led karusellpluggen for å gjøre ting til den.
Når markeringen er på plass, og JavaScript er levert riktig, bør du kunne oppdatere nettleseren din og se resultatene. Hver bilderotasjon tar fem sekunder. Pass på at musen ikke svinger over lysbildeserien, da dette stopper timeren.
Du kan legge til parametere for å justere tiden mellom karusellens skyveadferd.
For eksempel kan du endre timingen til 2 sekunders (2000 millisekond) intervaller som følger:
I oppslaget for trinn 1 ovenfor har jeg brukt Placehold.it bilder. Legg merke til at bilder på 1200 piksler bredt er store nok til å strekke hele maksimal bredde på standard Bootstrap-responsivt nettsted. Jeg har brukt et forhold på 1200x480px rett og slett fordi det virker visuelt behagelig for meg - i hvert fall på min store skjerm!
På dette tidspunktet er du fri til å:
Husk alltid, når du prøver ting og tweak dem, er Twitter Bootstraps utmerkede dokumentasjon din venn. Og hvis du kan bruke ekstra hjelp, finner mange folk hjelp i Twitter Bootstrap Google-gruppen.
Ta en titt på det endelige resultatet.
Accentsconagua
