13.07.2023, 05:13
Normaler Weise bin ich nicht so sehr dafür, das Rad neu zu erfinden aber in diesem Fall wäre es ein wenig Overkill, hier ein ausgewachsenes Slider-Skript einzusetzen. Und dein Skript abzuändern ist relativ einfach: Die Aktionen für einen Slider in eine Funktion packen:
Anders als bei der konventionellen Methode mit absoluter Positionierung habe ich hier die Slides mit Gridlayout übereinander gelegt. Und die Prev- und Next-Buttons fügt das Skript ein, Du brauchst diese nicht ins HTML zu schreiben.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple Image Slider</title>
<style>
div.slides {
display: grid;
}
figure.slide {
/* Wir legen alle Slides in die selbe Zelle des Grid,
damit sie übereinander liegen */
grid-row: 1/2;
grid-column: 1/2;
transition: opacity 0.5s;
}
</style>
</head>
<body>
<div class="container">
<div class="blog">
<div class="right">
<div class="slider">
<div class="slides">
<figure class="slide">
<img src="images/bild1.jpg" alt="" title="">
</figure>
<figure class="slide">
<img src="images/bild2.jpg" alt="" title="">
</figure>
<figure class="slide">
<img src="images/bild3.jpg" alt="" title="">
</figure>
</div><!-- slides Ende -->
</div><!-- slider Ende -->
</div> <!-- right Ende -->
<div class="left">
<p>Text</p>
</div>
</div> <!--- blog Ende --->
<div class="blog">
<div class="right">
<div class="slider">
<div class="slides">
<figure class="slide">
<img src="images/dia0.jpg" alt="" title="">
</figure>
<figure class="slide">
<img src="images/dia1.jpg" alt="" title="">
</figure>
<figure class="slide">
<img src="images/dia2.jpg" alt="" title="">
</figure>
<figure class="slide">
<img src="images/dia3.jpg" alt="" title="">
</figure>
</div><!-- slides Ende -->
</div><!-- slider Ende -->
</div> <!-- right Ende -->
<div class="left">
<p>Text</p>
</div>
</div> <!--- blog Ende --->
</div> <!-- container Ende -->
<script>
const timeout = 5000;
// Damit die einzelnen Slideshows getrennt verarbeitet werden
// legen wir den Code dafür in eine Funktion
function makeSlider(slider) {
const
// Alle Slides bereit stellen
imgslides = slider.querySelectorAll(".slide"),
// HTML für die Navigation bereit stellen
nav = `
<div>
<span class="prev">Previous</span>
<span class="next">Next</span>
</div`;
// ... und in Container am Ende eintragen
slider.insertAdjacentHTML('beforeend', nav);
const
// Previous- und Next-Button bereit stellen
previous = slider.querySelector(".prev"),
next = slider.querySelector(".next");
let current = -1;
let sliderTimer = setTimeout(fadeNextSlide, timeout);
function fadeNextSlide() {
for (let i = 0; i < imgslides.length; i++) {
imgslides[i].style.opacity = 0;
}
if (current !== imgslides.length - 1) {
current++;
} else {
current = 0;
}
imgslides[current].style.opacity = 1;
sliderTimer = setTimeout(fadeNextSlide, timeout);
}
next.addEventListener("click", function () {
clearTimeout(sliderTimer);
fadeNextSlide();
});
function fadePrevSlide() {
for (let i = 0; i < imgslides.length; i++) {
imgslides[i].style.opacity = 0;
}
if (current == 0) {
current = imgslides.length - 1;
} else {
current--;
}
imgslides[current].style.opacity = 1;
sliderTimer = setTimeout(fadeNextSlide, timeout);
}
previous.addEventListener("click", function () {
clearTimeout(sliderTimer);
fadePrevSlide();
});
}
// Alle Slider bereit stellen
sliders = document.querySelectorAll(".slider");
// ... und für jeden die Slideshow erzeugen
sliders.forEach(slider => makeSlider(slider));
</script>
</body>
</html>Anders als bei der konventionellen Methode mit absoluter Positionierung habe ich hier die Slides mit Gridlayout übereinander gelegt. Und die Prev- und Next-Buttons fügt das Skript ein, Du brauchst diese nicht ins HTML zu schreiben.
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)