Hallo! 👋 Heute werden wir uns ansehen, wie man einen einfachen, aber funktionalen Bild-Slider in reinem JavaScript erstellt. Wir werden keine Bibliotheken von Drittanbietern verwenden, damit Sie besser verstehen können, wie jedes Element des Sliders funktioniert und wie es verbessert werden kann.
Den fertigen Slider können Sie sich hier ansehen: https://coursme.github.io/02-slider-js/
Schritt 1. Vorbereitung der HTML-Struktur
Zuerst müssen wir eine HTML-Struktur für den Slider erstellen. Wir verwenden das Element <div> für die Folienumschläge und mehrere Bilder, die umgeschaltet werden.
HTML-Vorlage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Image Slider</title>
<style>
.slider {
width: 500px;
height: 300px;
overflow: hidden;
position: relative;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
min-width: 100%;
box-sizing: border-box;
}
img {
width: 100%;
height: 100%;
}
.controls {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
transform: translateY(-50%);
}
.control {
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
font-size: 18px;
cursor: pointer;
padding: 10px;
}
</style>
</head>
<body>
<h1>Слайдер изображений</h1>
<div class="slider">
<div class="slides">
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+1" alt="Slide 1"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+2" alt="Slide 2"></div>
<div class="slide"><img src="https://placehold.co/500x300?text=Slide+3" alt="Slide 3"></div>
<div class="controls">
<button class="control" id="prevBtn"><</button>
<button class="control" id="nextBtn">></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
📋 Erläuterung:
.slider: Ein Folien-Wrapper, der feste Abmessungen festlegt und alles ausblendet, was über die Grenzen (overflow: hidden) hinausgeht..slides: Ein Container für alle Folien, der sich nach links oder rechts bewegt, um die Bilder zu ändern..slide: Jede einzelne Folie. Wir setzen die Breite auf 100%, damit sie den gesamten sichtbaren Bereich einnimmt.Steuertasten: Dies sind die Schaltflächen "Weiter" und "Zurück", mit denen die Folien gewechselt werden.
Schritt 2. Hinzufügen von Logik zum Umschalten von Folien
Kommen wir nun zur Hauptlogik - zum Wechseln der Folien beim Klicken auf die Schaltflächen. Wir müssen die aktuelle Folie verfolgen und den Container .slides mit der CSS-Eigenschaft transform verschieben.
Implementierung in script.js:
const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
let currentIndex = 0;
const totalSlides = slide.length;
function updateSliderPosition() {
slides.style.transform = `translateX(-${currentIndex * 100}%)`;
}
nextBtn.addEventListener('click', () => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0; // Zurück zur ersten Folie
}
updateSliderPosition();
});
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
} else {
currentIndex = totalSlides - 1; // Zur letzten Folie wechseln
}
updateSliderPosition();
});
🔨 Wie funktioniert das?:
translateX(): Wir verwenden diese Eigenschaft, um den Foliencontainer je nach Index der aktuellen Folie nach links oder rechts zu verschieben.Tastenlogik: Jede Schaltfläche erhöht oder verringert den Folienindex, woraufhin die Funktion
updateSliderPosition()aufgerufen wird, die die Position des Containers aktualisiert.
Schritt 3. Automatisches Umschalten der Folien hinzufügen
Um unseren Slider benutzerfreundlicher zu machen, fügen wir die Funktion hinzu, die Folien in bestimmten Intervallen automatisch zu wechseln. Dadurch entsteht der Effekt einer endlosen Galerie.
Fügen Sie die automatische Umschaltung hinzu:
let autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000); // Folienwechsel alle 3 Sekunden
// Stoppen der automatischen Umschaltung bei der Interaktion mit den Tasten
nextBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
prevBtn.addEventListener('click', () => {
clearInterval(autoSlideInterval);
autoSlideInterval = setInterval(() => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateSliderPosition();
}, 3000);
});
🕒 Beschreibung:
Wir verwenden die Funktion
setInterval(), um die Folie automatisch alle 3 Sekunden zu wechseln.Die Interaktion mit den Schaltflächen (vorwärts/rückwärts) unterbricht das automatische Umschalten, startet es dann aber wieder, sodass der Slider automatisch weiterläuft.
Schritt 4. Abschluss und Testen
Jetzt ist dein Slider voll funktionsfähig! Du kannst die Folien manuell mit den Tasten wechseln oder den Slider automatisch alle paar Sekunden die Bilder wechseln lassen.
Befund
Das Erstellen eines Sliders in reinem JavaScript ist eine großartige Möglichkeit, DOM-Manipulationen und CSS zu üben. Ein solcher Slider lässt sich leicht erweitern, indem man beispielsweise Animationen, Fading-Effekte oder eine Navigation mit Hilfe von Indikatorpunkten hinzufügt. 🚀
Wenn du Fragen hast oder neue Funktionen zum Slider hinzufügen möchtest, helfe ich dir gerne weiter! 😄
Repository mit dem endgültigen Code: https://github.com/Coursme/02-slider-js