Share
En av Twitter Bootstraps många praktiska funktioner är en glädjande glidande karusell för att presentera bilder och innehåll! Setup är inte svårt. Det kräver en strukturerad markup, Bootstrap jQuery-plugin och ett par rader med JavaScript för att initiera den. Låt mig visa dig hur det är gjort!
Alternativt kan du ladda ner videoklippet eller prenumerera på Webdesigntuts + screencasts via iTunes eller YouTube!
För er som uppskattar handledning i svart och vitt, låt oss gå över:
Bootstrapkarusellen kräver ett specifikt märkningsmönster med lämpliga klasser.
‹ ›
Texttext här
Texttext här
Texttext här
Texttext här
När vi har levererat markeringen måste vi initiera karusell JavaScript för att göra sitt arbete på denna karusell.
Låt oss börja med att se till att nödvändig JavaScript är ansluten till den här sidan. Du hittar dina JavaScript-länkar nära undersidan av sidan, nära stängningskroppen.
Det bästa, mest rekommenderade sättet att länka jQuery är att länka till en CDN-värdversion. Detta ger en snabbare nedladdning, och den kan redan vara cachad i din användares webbläsare.
Men det är naturligtvis trevligt att ha en återgång, så att om något händer med den CDN-värdversionen kan användaren få den lokalt från dina egna sidfiler. Det är precis vad de bra på HTML5 Boilerplate rekommenderar, och det ser ut så här:
Observera att den första raden når ut till Googles värdversion. Den andra raden använder JavaScript för att kontrollera att den första raden gjorde sitt jobb. Om inte, genererar det automatiskt en länk till din egen värdkopia av jQuery, som du har med i dina egna sidfiler (som jag har här).
När vi har länkat jQuery behöver vi Bootstraps jQuery-plugins. Jag har inkluderat den fullständiga sammanställda och minifiera versionen av alla Bootstraps plugins. Således ser min länk ut så här:
När vi har tillhandahållit jQuery plus Bootstraps plugins behöver vi bara initiera karusellpluggen för att göra sitt arbete på vår karusell.
På vanlig engelska betyder detta: När HTML-dokumentet är klart identifierar du elementet / elementen med en klass av "Karusell", och rikta karusellpluggen för att göra saker åt det.
När markeringen är på plats och JavaScript har levererats korrekt bör du kunna uppdatera din webbläsare och se resultaten. Varje bildrotation tar fem sekunder. Var säker på att musen inte svävar över bildspelet, eftersom det pausar timern.
Du kan lägga till parametrar för att justera tiden mellan karusellglidningsbeteendet.
Till exempel kan du ändra tidsintervallet till 2 sekunders (2000 millisekund) intervall enligt följande:
I markeringen för steg 1 ovan har jag använt Placehold.it bilder. Observera att bilder med en bredd på 1200 pixlar är tillräckligt stora för att sträcka upp den maximala bredden på standard Bootstrap-mottagningssidan. Jag har använt ett förhållande på 1200x480px helt enkelt för att det verkar visuellt tilltalande för mig - åtminstone på min stora skärm!
Vid denna tidpunkt är du fri att
Kom alltid ihåg, när du försöker ut och tweak dem, är Twitter Bootstraps utmärkta dokumentation din vän. Och om du kan använda ytterligare hjälp, hittar många människor hjälp i Google Bootstrap Google Group.
Ta en titt på slutresultatet.
Accentsconagua
