Carousel mit HTML, CSS und Javascript
Ein Karussell (»Carousel«) wird oft für Bilder, Posts oder Rezensionen verwendet – Nutzer können vor- und zurückblättern oder es läuft automatisch von Bild zu Bild. In diesem Tutorial geht es darum, wie man einen einfachen Carousel mit HTML, CSS und JavaScript erstellt.
1. Wozu dienen Karussells?
Karussells geben einen schnellen Überblick über z.B. Angebote, Testimonials etc. oder einen schnellen Überblick eines Portfolios. Sie sparen Platz auf der Seite, da alle Informationen nicht auf einmal abgebildet sind, und sind interaktiv und visuell ansprechend auf den Nutzer. Am Besten sind sie geeignet für das Zeigen von visuellen Inhalte wie Bildern, Produkten, etc.
Leider können sie aber problematisch sein, wenn durch das automatische Blättern die Inhalte sich zu schnell wechseln. Auf die Navigation muss man auch achten, da eine unklare Navigation, die entweder durch die Farben der Buttons entsteht, unintuitiv für den Nutzer ist und das Browsen frustrierend machen könnte.
2. Die HTML-Datei
2.1. Der Grundaufbau
Dies ist der Basiscode in der HTML-Datei, mit dem wir unsere Karussellarbeit beginnen.
<!DOCTYPE html>
<html lang= "de" id="top">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<meta name="description" content="Carousel Tutorial">
<link rel="stylesheet" href="style.css">
<title>Carousel Tutorial</title>
<head>2.2. Liste erstellen
Zunächst binden wir Links zu unserer Galerie in die Liste ein. Wir fügen unseren Abschnitt der Klasse Foto hinzu, um die Platzierung des Karussells auf der Website zu erleichtern.
Außerdem definieren wir eine slide-Klasse für jedes Bild zur weiteren Bearbeitung im CSS-Datei.
<body>
<!--Alle Fotos hinzufügen-->
<section class="Fotos">
<div class="carousel">
<ul data-slides>
<li class="slide" data-active>
<img src="Carousel Tutorial/Bilder/1.jpg" alt="Image#1">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/2.jpg" alt="Image#2">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/3.jpg" alt="Image#3">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/4.jpg" alt="Image#4">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/5.jpg" alt="Image#5">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/6.jpg" alt="Image#6">
</li>
</ul>
</div>
</section>
</body>2.3. Buttons erstellen
Der nächste Schritt besteht darin, die Buttons zu erstellen. Sie können entweder SVG-Dateien oder Textzeichen verwenden.
Hier werden Textzeichen verwendet, die jedoch auf Geräten mit eingeschränkter Funktionalität instabil sein können.
<body>
<!--Alle Fotos hinzufügen-->
<section class="Fotos">
<div class="carousel">
<!--Navigation-->
<button class="button-prev" data-carousel-button="prev">
❮
</button>
<button class="button-next" data-carousel-button="next">
❯
</button>
<ul data-slides>
<li class="slide" data-active>
<img src="Carousel Tutorial/Bilder/1.jpg" alt="Image#1">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/2.jpg" alt="Image#2">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/3.jpg" alt="Image#3">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/4.jpg" alt="Image#4">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/5.jpg" alt="Image#5">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/6.jpg" alt="Image#6">
</li>
</ul>
</div>
</section>
</body>3. Die CSS-Datei
3.1. Grundaufbau
*, *::before, *::after {
box-sizing: border-box;
}Sorge dafür, dass Padding und Border in die Gesamtgröße eines Elements einbezogen werden. Das macht das Layout berechenbarer.
body {
margin: 0;
}Der Standardabstand des body-Tags wird entfernt, damit der Inhalt den gesamten Bildschirm ausnutzen kann – eine wichtige Voraussetzung für ein Karussell, das bildschirmfüllend dargestellt werden soll.
.carousel {
width: 100vw;
height: 100vh;
position: relative;
}Hier wird ein flexibler Container definiert, der sich über die volle Breite und Höhe des Browserfensters erstreckt. Durch position: relative können die darin enthaltenen Slides exakt positioniert werden – ein Muss für jede Art von animierter Slideshow.
.carousel > ul {
margin: 0;
padding: 0;
list-style: none;
}Die Karussell-Slides sind als ul-Liste organisiert. Damit die Liste aber rein funktional und nicht visuell erscheint, werden alle Standardstile entfernt – keine Aufzählungszeichen, kein Abstand.
.slide img {
width: 100vw;
height: 100vh;
object-fit: contain;
display: block;
}Jedes Bild in einer Slide füllt den gesamten Bildschirm aus – sowohl in Breite als auch in Höhe.
Mitobject-fit: contain bleibt das Bild immer vollständig sichtbar, auch wenn dabei schwarze Ränder entstehen.
display: block verhindert zudem störende Lücken unter dem Bild.
.slide {
position: absolute;
inset: 0;
opacity: 0;
}
.slide[data-active] {
opacity: 1;
}Slides sind standardmäßig unsichtbar und werden absolut im Container positioniert. Mit inset: 0 erstrecken sie sich über die gesamte Fläche. Dadurch können mehrere Slides übereinander liegen, ohne sich gegenseitig zu stören.
Über das Attribut [data-active] wird per JavaScript gesteuert, welche Slide angezeigt wird. Nur diese erhält eine opacity von 1 und wird dadurch sichtbar.
3.3. Buttons gestalten
Sobald der Benutzer mit der Maus über die Buttons fährt oder sie per Tastatur fokussiert, erscheinen sie in voller Deckkraft mit roter Farbe – eine klare visuelle Rückmeldung, dass sie aktiv sind.
.button-prev:hover, .button-next:hover,
.button-prev:focus, .button-next:focus {
color: red;
opacity: 100%;
}
.button-prev{
left: 1rem;
}
.button-next{
right: 1rem;
}Die Buttons zur Navigation im Karussell – also für ›zurück‹ und ›weiter‹ – müssen visuell klar voneinander getrennt sein und gleichzeitig gut erreichbar bleiben.
.button-prev sitzt 1rem vom linken Rand entfernt und stellt damit den Zurück-Button dar (meist ein <).
.button-next ist dementsprechend 1rem vom rechten Rand entfernt und symbolisiert den Weiter-Button (>).
4. Die JavaScript-Datei
4.1. JavaScript-Datei einbinden im HTML und Selektoren hinzufügen
In head binden wir unsere JavaScript-Datei mit der Boolean defer, damit der Browser weist, die Ausführung von JavaScript nach dem Laden der gesamten Seite erfolgen soll.
<head>
<meta charset="UTF-8!>
<meta name="viewport" content="width=device-width, initalial-scale=1.0>
<meta name="description" content="Carousel Tutorial">
<link rel="stylesheet" href="style.css">
<title>Carousel Tutorial</title>
<script scr="/Carousel Tutorial/JavaScript/script.js" defer></script>
</head>Zum eigentlichen Karussell geben wir im div den Selektor data-carousel und für den Buttons data-carousel-button mit den Werten “prev” und “next”.
<div class="carousel" data-carousel>
<!--Navigation-->
<button class="button-prev" data-carousel-button="prev">
❮
</button>
<button class="button-next" data-carousel-button="next">
❯
</button>Die Liste bekommt auch einen Selektor und nur das erste Listenelement wird data-active hinzugefügt.
<ul data-slides>
<li class="slide" data-active>
<img src="Carousel Tutorial/Bilder/1.jpg" alt="Image#1">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/2.jpg" alt="Image#2">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/3.jpg" alt="Image#3">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/4.jpg" alt="Image#4">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/5.jpg" alt="Image#5">
</li>
<li class="slide">
<img src="Carousel Tutorial/Bilder/6.jpg" alt="Image#6">
</li>
</ul>Mit diesen Edits wird dann der Carousel, nachdem die JavaScript-Datei vervollständigt wird, nutzbar.
4.2 Button-Funktion
In den JavaScript-Datei deklarieren wir erst die Buttons als Variablen mit den Parametern für den Selektor [data-carousel-button].
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
})In den Klammern fügen wir dann einen Bedingungsoperator hinzu, der auf die Selektoren in der HTML-Datei zugreift. Wenn der Wert für den Button als “next” deklariert wurde, gibt es den Wert 1 (sonst -1) beim Klicken.
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
})
}).closest(“[data-carousel]”) gibt es das nahegelegenste Element und seine Eltern, das dem Selektor entspricht.
.querySelector([“data-slides”]), wie der Name schon sagt, sucht innerhalb eines Selektors das erste Element, das dem entspricht.
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
})
})Zunächst erstellen wir ein Feld mit unseren Slides und fügen indexOf(activeSlide) + offset, die die Nummer des aktiven Slides angibt, mit entweder +1 oder -1 zu ihrem Wert.
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
})
})Weil es wie ein Loop funktionieren soll, muss das letzte Slide uns wieder zum Anfang bringen, und umgekehrt. Mit if-Anweisungen wird es hier möglich:
if (newIndex < 0)setzt den Wert des Feldes die Gesamtzahl von Slides-1, also das Endeif (newIndex >= slides.children.length)setzt den Wert auf0, also den Anfang
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0
})
})Zuletzt müssen wir sicherstellen, dass data-active auf das neue aktive Slide sich befindet, und dass der vorherige nicht den Selektor hat.
const buttons = document.querySelectorAll("[data-carousel-button]")
buttons.forEach(button => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]")
const activeSlide = slides.querySelector("[data-active]")
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0
slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
})
})5. Karussell in Action
Wenn alles richtig codiert wurde, sollte deas Endresultat wie folgt aussehen: Zwei Buttons, die man drücken kann, um von einem Bild zu anderen zu blättern.
6. Erweiterungen
Mögliche visuelle Erweiterungen für das Carousel wären Animationen von einem Bild zum Nächsten oder Vorherigen, sowie Scroll Markers, damit der Nutzer weist, bei welchem Slide man sich befindet.
Als Beispiel: Eine Transition vom Bild zu Bild mit ease-in-out. Das erleichtert den Wechsel von den Bildern auf den Augen.
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}Der aktive Slide muss dann nach vorne gehoben mit z-index: 1.
.slide[data-active] {
opacity: 1;
transition-delay: 0ms;
z-index: 1;
}So sieht das Karussell am Ende aus:
7. Quellenverzeichnis
CodePen.io:
Quellen:
- How To Create An Animated Image Carousel With CSS/JavaScript
- User interface patterns | web.dev
- A Step-By-Step Guide To Building Accessible Carousels — Smashing Magazine
Downloads:
