Antworten auf deine Fragen:
Neues Thema erstellen

Mehrere Slider auf Webseite

mobbytec

Aktives Mitglied

Hallo,
ich habe für einen Slidershow folgenden Code:
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:
Code:
    <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

Aktives Mitglied

Die Ursache liegt darin, dass mit
Code:
var slides = document.getElementsByClassName("mySlides");
alle Bilder mit der entsprechenden Klasse zusammen gesucht und dann angezeigt werden.
 

Myhar

Hat es drauf

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben