Share
Eine der vielen nützlichen Funktionen von Twitter Bootstrap ist ein ansprechendes Karussell für Bilder und Inhalte! Das Setup ist nicht schwierig. Es erfordert ein strukturiertes Markup, das Bootstrap-Plugin jQuery und einige JavaScript-Zeilen, um es zu initialisieren. Lass mich dir zeigen, wie es geht!
Alternativ können Sie das Video herunterladen oder Webdesigntuts + Screencasts über iTunes oder YouTube abonnieren!
Für diejenigen unter Ihnen, die Tutorials in Schwarz und Weiß schätzen, gehen wir weiter:
Das Bootstrap-Karussell erfordert ein bestimmtes Auszeichnungsmuster mit entsprechenden Klassen.
‹ ›
Bildtext hier
Bildtext hier
Bildtext hier
Bildtext hier
Nachdem wir das Markup bereitgestellt haben, müssen wir das Karussell-JavaScript initialisieren, um seine Arbeit an diesem Karussell zu erledigen.
Beginnen wir damit, dass das erforderliche JavaScript mit dieser Seite verbunden ist. Sie finden Ihre JavaScript-Links am unteren Rand der Seite, in der Nähe des schließenden body-Tags.
Die beste und am meisten empfohlene Methode zum Verknüpfen von jQuery ist die Verknüpfung mit einer von CDN gehosteten Version. Dies ermöglicht einen schnelleren Download und ist möglicherweise bereits im Browser des Benutzers zwischengespeichert.
Aber natürlich wäre es schön, einen Fallback zu haben, damit der Benutzer sie, falls etwas mit dieser von CDN gehosteten Version geschieht, lokal aus den eigenen Site-Dateien beziehen kann. Das ist genau das, was die guten Leute von der HTML5-Boilerplate empfehlen, und es sieht so aus:
Beachten Sie, dass die erste Zeile die gehostete Version von Google umfasst. Die zweite Zeile verwendet JavaScript, um zu überprüfen, ob die erste Zeile ihre Aufgabe erfüllt hat. Wenn nicht, wird automatisch ein Link zu Ihrer eigenen gehosteten Kopie von jQuery erzeugt, die Sie in Ihre eigenen Site-Dateien aufgenommen haben (wie hier)..
Nachdem wir jQuery verlinkt haben, benötigen wir die jQuery-Plugins von Bootstrap. Ich habe die vollständige kompilierte und minimierte Version aller Bootstrap-Plugins mitgeliefert. So sieht mein Link so aus:
Nachdem wir jQuery plus Bootstrap-Plugins bereitgestellt haben, müssen wir nur das Carousel-Plugin initialisieren, um seine Arbeit an unserem Karussell zu erledigen.
Im Klartext heißt das: Wenn das HTML-Dokument fertig ist, identifizieren Sie die Elemente mit einer Klasse von "Karussell", und weisen Sie das Karussell-Plugin an, damit es seine Sache tut.
Sobald das Markup erstellt wurde und das JavaScript korrekt bereitgestellt wurde, sollten Sie in der Lage sein, Ihren Browser zu aktualisieren und die Ergebnisse anzuzeigen. Jede Bilddrehung dauert fünf Sekunden. Stellen Sie sicher, dass sich Ihre Maus nicht über der Diashow befindet, da dies den Timer anhält.
Sie können Parameter hinzufügen, um die Zeit zwischen dem Karussellgleitverhalten anzupassen.
Sie können das Timing beispielsweise wie folgt in Intervalle von 2 Sekunden (2.000 Millisekunden) ändern:
Im Markup für Schritt 1 oben habe ich Placehold.it-Bilder verwendet. Beachten Sie, dass Bilder mit einer Breite von 1200 Pixeln groß genug sind, um die volle maximale Breite der standardmäßigen, auf Bootstrap reagierenden Site zu strecken. Ich habe ein Verhältnis von 1200x480px verwendet, einfach weil es mir optisch ansprechend erscheint - zumindest auf meinem großen Monitor!
An diesem Punkt können Sie:
Denken Sie immer daran, wenn Sie Dinge ausprobieren und optimieren, ist die hervorragende Dokumentation von Twitter Bootstrap Ihr Freund. Und wenn Sie zusätzliche Hilfe benötigen, finden viele Leute Hilfe in der Twitter Bootstrap Google Group.
Sehen Sie sich das Endergebnis an.
Accentsconagua
