Bootstrap - Carousel-Demo: Ein Anfängerleitfaden

Hallo da draußen, zukünftige Webentwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der Bootstrap Carousel. Als Ihr freundlicher Nachbarschafts-EDV-Lehrer bin ich begeistert, Sie durch diese unterhaltsame und interaktive Funktion zu führen, die Ihre Websites zum Leben erwecken kann!

Bootstrap - Carousel Demo

Was ist ein Carousel?

Bevor wir uns in den Code stürzen, beginnen wir mit den Grundlagen. Stellen Sie sich vor, Sie blättern durch ein Fotoalbum, aber anstatt Seiten umzublättern, gleiten die Fotos zauberhaft ein und aus dem Blickfeld. Das ist im Grunde genommen, was ein Carousel auf einer Website macht!

Ein Carousel, auch bekannt als Diashow, ist ein Komponente, die eine Reihe von Inhalts-elementen (wie Bilder oder Text) in einer drehenden Weise anzeigt. Es ist so, als hätte man eine kleine Diashow direkt auf seiner Webseite. Cool, oder?

Warum ein Carousel verwenden?

Carousels sind großartig für:

Präsentation mehrerer Produkte oder Funktionen
Anzeige einer Bildergalerie
Präsentation von wichtigen Informationen in einem kompakten Raum

Jetzt, wo wir wissen, was ein Carousel ist und warum es nützlich ist, lassen Sie uns die Ärmel hochkrempeln und eines mit Bootstrap erstellen!

Einrichtung unseres Bootstrap Carousel

Zuerst einmal, wir müssen unsere HTML-Struktur einrichten. Machen Sie sich keine Sorgen, wenn das initially etwas überwältigend aussieht - wir werden es Schritt für Schritt durchgehen!

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mein cooler Carousel</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel-Inhalt kommt hier hin -->
</div>
</div>

<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Lassen Sie uns das einmal auseinandernehmen:

Wir beginnen mit einer Standard-HTML5-Dokumentstruktur.
Im <head> verlinken wir zur Bootstrap-CSS-Datei. Das gibt uns Zugang zu all den vorkonfigurierten Stilen von Bootstrap.
Im <body> erstellen wir einen Container <div>, um unser Carousel zu halten.
Innen im Container haben wir ein anderes <div> mit der ID "myCarousel". Das wird unser Carousel-Komponente sein.
Unten im <body> fügen wir die Bootstrap-Javascript-Datei ein, die die interaktiven Funktionen unseres Carousels antreibt.

Hinzufügen von Carousel-Inhalt

Jetzt fügen wir unserem Carousel etwas Inhalt hinzu! Wir verwenden Bilder für dieses Beispiel, aber denken Sie daran, Sie können fast alles in einem Carousel-Slide platzieren.

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<!-- Carousel-Indikatoren -->
<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>

<!-- Carousel-Slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="Slide 3">
</div>
</div>

<!-- Carousel-Steuerelemente -->
<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vorherige</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Nächste</span>
</a>
</div>

Wow, das ist eine Menge Code! Aber keine Panik – lassen Sie uns das in mundgerechte Stücke aufteilen:

Carousel-Indikatoren

<ol class="carousel-indicators">
<li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
<li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
</ol>

Diese kleinen Punkte unten am Carousel zeigen an, welche Slide momentan aktiv ist und erlauben es den Benutzern, zu einem bestimmten Slide zu springen. Jedes <li> repräsentiert einen Slide.

Carousel-Slides

<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="Slide 1">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=2" class="d-block w-100" alt="Slide 2">
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?random=3" class="d-block w-100" alt="Slide 3">
</div>
</div>

Hier passiert die Magie! Jede carousel-item ist ein Slide in unserem Carousel. Der erste hat die active Klasse, was bedeutet, dass er zuerst angezeigt wird. Wir verwenden Platzhalter-Bilder von Lorem Picsum, aber Sie können hier Ihre eigenen Bilder verwenden.

Carousel-Steuerelemente

<a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Vorherige</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Nächste</span>
</a>

Diese sind die Vorherige und Nächste Buttons, die es den Benutzern ermöglichen, manuell durch die Slides zu navigieren.

Anpassung unseres Carousels

Jetzt, wo wir ein grundlegendes Carousel haben, das läuft, lassen Sie uns ein bisschen Würze hinzufügen! Wir können Captions zu unseren Slides hinzufügen, um mehr Kontext zu geben.

<div class="carousel-item active">
<img src="https://picsum.photos/800/400?random=1" class="d-block w-100" alt="Slide 1">
<div class="carousel-caption d-none d-md-block">
<h5>Erster Slide Label</h5>
<p>Einige repräsentative Platzhalter-Inhalte für den ersten Slide.</p>
</div>
</div>

Fügen Sie diese carousel-caption div zu jedem Ihrer Carousel-Items hinzu, und Sie werden informative Captions auf Ihren Slides sehen!

Carousel-Optionen

Bootstrap's Carousel kommt mit mehreren Optionen, die Sie verwenden können, um sein Verhalten anzupassen. Hier ist eine Tabelle mit einigen häufigen Optionen:

Option	Standard	Beschreibung
interval	5000	Die Zeitspanne, um zu verzögern, bevor automatisch zwischen den Elementen gewechselt wird
keyboard	true	Ob das Carousel auf Tastaturereignisse reagieren soll
pause	'hover'	Pausiert das Wechseln des Carousels bei Mausberührung und setzt das Wechseln fort, wenn die Maus das Carousel verlässt
wrap	true	Ob das Carousel kontinuierlich oder mit harten Stops drehen soll
touch	true	Ob das CarouselSwipe-Interaktionen auf Touchscreen-Geräten unterstützen soll

Um diese Optionen zu verwenden, können Sie Datenattribute zu Ihrem Carousel-Element hinzufügen. Zum Beispiel:

<div id="myCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="3000" data-bs-wrap="false">
<!-- Carousel-Inhalt -->
</div>

Dies würde das Carousel so einstellen, dass es automatisch alle 3 Sekunden die Slides wechselt und nach Erreichen des letzten Slides anhält.

Fazit

Und da haben Sie es, Leute! Sie haben gerade Ihr eigenes Bootstrap Carousel erstellt. Von der Einrichtung der Grundstruktur bis hin zum Hinzufügen von Inhalt und Anpassung der Optionen haben Sie alle Essentials abgedeckt. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, mit verschiedenen Bildern, Captions und Optionen zu experimentieren.

Als Ihr verlässlicher EDV-Lehrer kann ich Ihnen sagen, dass das Beherrschen von Funktionen wie Carousels nur der Anfang Ihrer Webentwicklungsreise ist. Bleiben Sie neugierig, bleiben Sie am Lernen und vor allem, haben Sie Spaß dabei!

Nun, machen Sie sich auf den Weg und erstellen Sie einige erstaunliche Websites mitCAROUSEL, wer weiß? Vielleicht wird die nächste große Sache im Internet Ihr Carousel in der ersten Reihe zeigen! Frohes Coden, alle!

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Slider-Demo

Nächstes Tutorial:

Bootstrap -Headers-Demo