Mehrere Slider auf Webseite

Mehrere Slider auf Webseite | PSD-Tutorials.de

Erstellt von mobbytec, 19.08.2019.

  1. mobbytec

    mobbytec Aktives Mitglied

    Dabei seit:
    20.04.2011
    Beiträge:
    470
    Geschlecht:
    männlich
    Software:
    InDesign, Photoshop (CC2018), MacOS
    Mehrere Slider auf Webseite
    Hallo,
    ich habe für einen Slidershow folgenden Code:
    Code (Text):
    1. var slideIndex = 1;
    2. showSlides(slideIndex);
    3.  
    4. // Navigation
    5. function plusSlides(n) {
    6. showSlides(slideIndex += n);
    7. }
    8.  
    9. // Vorschaubilder
    10. function currentSlide(n) {
    11. showSlides(slideIndex = n);
    12. }
    13.  
    14. function showSlides(n) {
    15. var i;
    16. var slides = document.getElementsByClassName("mySlides");
    17. var dots = document.getElementsByClassName("dot");
    18. if (n > slides.length) {slideIndex = 1}
    19. if (n < 1) {slideIndex = slides.length}
    20. for (i = 0; i < slides.length; i++) {
    21. slides[i].style.display = "none";
    22. }
    23. for (i = 0; i < dots.length; i++) {
    24. dots[i].className = dots[i].className.replace("active", "");
    25. }
    26. slides[slideIndex-1].style.display = "block";
    27. dots[slideIndex-1].className += " active";
    28. }
    29.  
    Die Grafiken werden wie folgt ausgegeben:
    Code (Text):
    1.  
    2.     <div class="modal fade" id="Modal-1" tabindex="-1" role="dialog" aria-labelledby="Modal-label-1">
    3.         <div class="modal-dialog" role="document">
    4.             <div class="slideshow-container">
    5.                 <div class="modal-content">
    6.                     <div class="modal-header">
    7.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
    8.                                 aria-hidden="true">&times;</span></button>
    9.                         <h4 class="modal-title" id="Modal-label-1">Headline</h4>
    10.                     </div>
    11.                     <div class="modal-body">
    12.                         <div class="mySlides">
    13.                             <img src="#" class="img-responsive">
    14.                         </div>
    15.                         <div class="mySlides">
    16.                             <img src="#" class="img-responsive">
    17.                         </div>
    18.  
    19.                         <a class="prev" onclick="plusSlides(-1)" alt="zurück">&#10094;</a>
    20.                         <a class="next" onclick="plusSlides(1)" alt="vor">&#10095;</a>
    21.                     </div>
    22.  
    23.                     <div class="modal-footer">
    24.                         <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
    25.                     </div>
    26.                 </div>
    27.             </div>
    28.         </div>
    29.     </div>
    30.  
    31.     <div class="modal fade" id="Modal-2" tabindex="-1" role="dialog" aria-labelledby="Modal-label-2">
    32.         <div class="modal-dialog" role="document">
    33.             <div class="slideshow-container">
    34.                 <div class="modal-content">
    35.                     <div class="modal-header">
    36.                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
    37.                                 aria-hidden="true">&times;</span></button>
    38.                         <h4 class="modal-title" id="Modal-label-2">Headline</h4>
    39.                     </div>
    40.                     <div class="modal-body">
    41.                         <div class="mySlides">
    42.                             <img src="#" class="img-responsive">
    43.                         </div>
    44.                         <div class="mySlides">
    45.                             <img src="#" class="img-responsive">
    46.                         </div>
    47.                         <div class="mySlides">
    48.                             <img src="# class=" img-responsive">
    49.                         </div>
    50.  
    51.                         <a class="prev" onclick="plusSlides(-1)" alt="zurück">&#10094;</a>
    52.                         <a class="next" onclick="plusSlides(1)" alt="vor">&#10095;</a>
    53.                     </div>
    54.  
    55.                     <div class="modal-footer">
    56.                         <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
    57.                     </div>
    58.                 </div>
    59.             </div>
    60.         </div>
    61.     </div>
    62.  
    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?
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. lachender_engel

    lachender_engel Aktives Mitglied

    Dabei seit:
    23.03.2009
    Beiträge:
    1.349
    Geschlecht:
    männlich
    Ort:
    Die Welt
    Software:
    Adobe Creative Cloud CC, Notepad++, IrfanView, Jetbrains PhpStorm
    Kameratyp:
    Nikon D7200
    Mehrere Slider auf Webseite
    Die Ursache liegt darin, dass mit
    Code (Text):
    1. var slides = document.getElementsByClassName("mySlides");
    alle Bilder mit der entsprechenden Klasse zusammen gesucht und dann angezeigt werden.
     
    #2      
  4. mobbytec

    mobbytec Aktives Mitglied

    Dabei seit:
    20.04.2011
    Beiträge:
    470
    Geschlecht:
    männlich
    Software:
    InDesign, Photoshop (CC2018), MacOS
    Mehrere Slider auf Webseite
    Danke für die Antwort.
    Kann man das im js etwas variabler handhaben?
     
    #3      
  5. lachender_engel

    lachender_engel Aktives Mitglied

    Dabei seit:
    23.03.2009
    Beiträge:
    1.349
    Geschlecht:
    männlich
    Ort:
    Die Welt
    Software:
    Adobe Creative Cloud CC, Notepad++, IrfanView, Jetbrains PhpStorm
    Kameratyp:
    Nikon D7200
    Mehrere Slider auf Webseite
    Ja.
     
    #4      
    Curanai und Myhar gefällt das.
  6. mobbytec

    mobbytec Aktives Mitglied

    Dabei seit:
    20.04.2011
    Beiträge:
    470
    Geschlecht:
    männlich
    Software:
    InDesign, Photoshop (CC2018), MacOS
    Mehrere Slider auf Webseite
    Magst Du mir sagen, wo nach ich da suchen soll?
     
    #5      
  7. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.260
    Geschlecht:
    männlich
    Ort:
    Ö
    Mehrere Slider auf Webseite
    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.
     
    #6      
Seobility SEO Tool
x
×
×