Share
Een van de vele handige functies van Twitter Bootstrap is een aangename glijdende carrousel voor het weergeven van afbeeldingen en inhoud! Setup is niet moeilijk. Het vereist een aantal gestructureerde markup, de Bootstrap jQuery-plug-in en een paar regels JavaScript om het te initialiseren. Ik zal je laten zien hoe het gedaan is!
Of download de video of abonneer je op Webdesigntuts + screencasts via iTunes of YouTube!
Voor degenen onder u die tutorials in zwart en wit op prijs stellen, laten we het volgende bespreken:
De Bootstrap-carrousel vereist een specifiek markup-patroon, met de juiste klassen.
‹ ›
Tekst bijschrift hier
Tekst bijschrift hier
Tekst bijschrift hier
Tekst bijschrift hier
Zodra we de markup hebben opgegeven, moeten we de carrousel JavaScript initialiseren om zijn werk aan deze carrousel te doen.
Laten we beginnen door ervoor te zorgen dat het noodzakelijke JavaScript op deze pagina is aangesloten. U vindt uw JavaScript-links onder aan de pagina, in de buurt van de afsluitende body-tag.
De beste, meest aanbevolen manier om jQuery te linken is om een koppeling te maken naar een door CDN gehoste versie. Dit zorgt voor een snellere download en deze kan al in de cache van de browser van uw gebruiker worden opgeslagen.
Maar het zou natuurlijk leuk zijn om een terugval te hebben, zodat als er iets gebeurt met die door CDN gehoste versie, de gebruiker het lokaal kan ophalen van je eigen sitebestanden. Dat is precies wat de goede mensen van de HTML5 Boilerplate aanbevelen, en het ziet er als volgt uit:
Merk op dat de eerste regel reikt naar de gehoste versie van Google. De tweede regel gebruikt JavaScript om te controleren of de eerste regel zijn werk deed. Als dit niet het geval is, genereert het automatisch een koppeling naar uw eigen gehoste kopie van jQuery, die u hebt toegevoegd aan uw eigen sitebestanden (zoals ik hier heb).
Zodra we jQuery hebben gekoppeld, hebben we de jQuery-plug-ins van Bootstrap nodig. Ik heb de complete gecompileerde en verkleinde versie van alle Bootstrap-plug-ins opgenomen. Dus mijn link ziet er zo uit:
Zodra we jQuery plus Bootstrap's plug-ins hebben geleverd, hoeven we alleen maar de Carousel-plug-in te initialiseren om zijn werk aan onze carrousel te doen..
In gewoon Engels betekent dit: Zodra het HTML-document klaar is, identificeert u het element of de elementen met een klasse van "carrousel", en dirigeert de plug-in carrousel om zijn ding te doen.
Zodra de markup op zijn plaats is en het JavaScript correct is geleverd, zou u uw browser moeten kunnen vernieuwen en de resultaten kunnen zien. Elke beeldrotatie duurt vijf seconden. Zorg ervoor dat uw muis niet over de diavoorstelling beweegt, omdat hierdoor de timer wordt onderbroken.
U kunt parameters toevoegen om de tijd tussen het glijkgedrag van de carrousel aan te passen.
U kunt de timing bijvoorbeeld als volgt wijzigen in intervallen van 2 seconden (2.000 milliseconden):
In de markup voor stap 1, hierboven, heb ik Placehold.it-afbeeldingen gebruikt. Merk op dat afbeeldingen van 1200 pixels breed genoeg zijn om de volledige maximale breedte van de standaard Bootstrap-responsieve site uit te strekken. Ik heb een ratio van 1200x480 px gebruikt, simpelweg omdat het me visueel aantrekkelijk lijkt, tenminste op mijn grote monitor!
Op dit moment bent u vrij om:
Onthoud altijd dat als je dingen uitprobeert en aanpast, de uitstekende documentatie van Twitter Bootstrap je vriend is. En als u extra hulp kunt gebruiken, vinden veel mensen hulp in de Twitter Bootstrap Google Group.
Bekijk het eindresultaat.
Accentsconagua
