Ich habe einen Blog erstellt, bei dem rechts neben dem Beitragstext in einem Image-Slider verschiedene Bilder passend zum Beitrag durchlaufen sollen. Hierfür verwende ich folgendes Script:
var current = 0,
slides = document.getElementsByClassName("slide");
setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
current = (current != slides.length - 1) ? current + 1 : 0;
slides[current].style.opacity = 1;
}, 3000);
Die HTML-Struktur sieht (vereinfacht) wie folgt aus:
<div class="blogbeitrag">
<p>Text</p>
<div class="slider">
<img class="slide" src="images/Bild1.jpg" alt="">
<img class="slide" src="images/Bild2.jpg" alt="">
<img class="slide" src="images/Bild3.jpg" alt="">
<img class="slide" src="images/Bild4.jpg" alt="">
</div>
</div>
<div class="blogbeitrag">
<p>Text</p>
<div class="slider">
<img class="slide" src="images/Bild5.jpg" alt="">
<img class="slide" src="images/Bild6.jpg" alt="">
<img class="slide" src="images/Bild7.jpg" alt="">
<img class="slide" src="images/Bild8.jpg" alt="">
</div>
</div>
Nun ist es so, dass der Slider sich auf alle Slider-Elemente in dem Blog bezieht. D.h. sobald Bild4 im ersten Beitrag fertig ist, "sliden" die Elemente unten weiter – oben wird es dafür schwarz.
Weiß jemand, was ich an dem Script ändern muss, damit das nicht passiert?
Danke für die Hilfe!
- bigRust