Mehrere Slider auf Webseite

[mobbytec]

Hallo,
ich habe für einen Slidershow folgenden Code:

var slideIndex = 1;
showSlides(slideIndex);

// Navigation
function plusSlides(n) {
showSlides(slideIndex += n);
}

// Vorschaubilder
function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace("active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

Die Grafiken werden wie folgt ausgegeben:

    <div class="modal fade" id="Modal-1" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1">
        <div class="modal-dialog" role="document">
            <div class="slideshow-container">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="Modal-label-1">Headline</h4>
                    </div>
                    <div class="modal-body">
                        <div class="mySlides">
                            <img src="#" class="img-responsive">
                        </div>
                        <div class="mySlides">
                            <img src="#" class="img-responsive">
                        </div>

                        <a class="prev" onclick="plusSlides(-1)" alt="zurück">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)" alt="vor">&#10095;</a>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="Modal-2" tabindex="-1" role="dialog" aria-labelledby="Modal-label-2">
        <div class="modal-dialog" role="document">
            <div class="slideshow-container">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="Modal-label-2">Headline</h4>
                    </div>
                    <div class="modal-body">
                        <div class="mySlides">
                            <img src="#" class="img-responsive">
                        </div>
                        <div class="mySlides">
                            <img src="#" class="img-responsive">
                        </div>
                        <div class="mySlides">
                            <img src="# class=" img-responsive">
                        </div>

                        <a class="prev" onclick="plusSlides(-1)" alt="zurück">&#10094;</a>
                        <a class="next" onclick="plusSlides(1)" alt="vor">&#10095;</a>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

Ich habe jetzt das Problem, dass alle Grafiken aus Modal-1 und Modal-2 in der Slider angezeigt werden. Es sollen aber nur die angezeigt werden, die in der Div vorhanden sind?

 

[lachender_engel]

Die Ursache liegt darin, dass mit

var slides = document.getElementsByClassName("mySlides");

alle Bilder mit der entsprechenden Klasse zusammen gesucht und dann angezeigt werden.

 

[mobbytec]

Danke für die Antwort.
Kann man das im js etwas variabler handhaben?

 

[lachender_engel]

Ja.

 

[mobbytec]

Magst Du mir sagen, wo nach ich da suchen soll?

 

[Myhar]

Du kannst einerseits deinen Code für den Slider wegschmeißen und ihn neu schreiben so dass er modular verwendet werden kann. So wie das jetzt ist funktioniert er nur für einen Slider auf der Seite. Und kann auch nicht "einfach so" umgeschrieben werden.

Oder du verwendest einen slider wie zb diesen hier, die können deine Anforderungen erfüllen.