Problem mit Slideshow

Sundream

Hallo ihr,

ich habe (wie der Titel schon sagt) ein Problem mit meiner Slideshow.

Ich habe mich nach dem Code auf dieser Website gerichtet: https://www.w3schools.com/howto/howto_js_slideshow.asp

Wenn ich alles einbaue funktioniert die Slideshow zwar, aber erst, wenn ich das erste Mal auf einen der Pfeile geklickt habe.

Vor dem ersten Anklicken:

Nach dem ersten Anklicken (Hab das Bild bisschen unkenntlich gemacht, aber im Prinzip sieht man, dass es eigentlich funktioniert):

Ich möchte gerne, dass alles standardmäßig so angezeigt wird wie auf Bild zwei...

Kann mir jemand helfen?

Danke schonmal. Code ist wie gesagt im Link oben.

LG

Sundream

Ich vermute mal der Hund ist hier begraben:

Code

<script type="text/javascript">
    
var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
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";
} 


</script>

Alles anzeigen

Ich versteh nur leider zu wenig von JavaScript...

HTML sieht so aus:

Code

<!-- Slideshow container -->
<div class="slideshow-container">

  <!-- Full-width images with number and caption text -->
  <div class="mySlides fade">

    <img src="Bilder/leichtbauhalle-haltec-basic-01.jpg" style="width:100%">
    <img src="Bilder/Testimonial1.png" class="Slideshow-img-Testimonial">

    <div class="Zitate fade" style="height:350px;width: 450px;"><p>Mit HALTEC war schnell die passende Lösung für meine Lageranforderungen gefunden. Die zügige Montage und Lieferung war klasse. Jederzeit wieder. </p>
        <img src="Bilder/Anfuehrungszeichen.png" class="quote">
        </div>
  
  </div>

  <div class="mySlides fade">
    
    <img src="Bilder/leichtbauhalle-haltec-basic-02.jpg" style="width:100%">

  </div>

  <div class="mySlides fade">
   
    <img src="Bilder/leichtbauhalle-haltec-basic-03.jpg" style="width:100%">
 
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

Alles anzeigen

CSS:

Code

/* Slideshow container */
.slideshow-container {
  max-width: 1434px;
  position: relative;
  margin: auto;
  text-align: start;
  margin-top:2em;
  margin-bottom: 5em;
  display:block;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  background-color:black;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}



/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

   
.mySlides div.Zitate {background-color: white;
    position: absolute;
    margin-top: -33em;
    margin-left: 12em;
    -webkit-box-shadow: inset 0px -1px 26px -5px rgba(0,0,0,0.77);
-moz-box-shadow: inset 0px -1px 26px -5px rgba(0,0,0,0.77);
box-shadow: inset 0px -1px 26px -5px rgba(0,0,0,0.77);
    }

.mySlides div.Zitate p {padding:80px;padding-top:120px;
    padding-right:47px;padding-left:120px;color:#0096dc;font-size: 17px;font-family: KievitOT Light,sans-serif;}

.mySlides img.Slideshow-img-Testimonial {
    display: none;
    position: absolute;
    z-index: 400;
    display: block;
    margin-top: -27.7em;
}

.mySlides img.quote {position: absolute;display: block;padding-left: 350px;
margin-top: -21em;}

Alles anzeigen

Sundream

Habe die Lösung in einem anderen Forum gefunden:

Die Reihenfolge hat nicht gepasst. Der JS Code wurde vor dem HTML geladen. <script>-Tag ans Ende vor dem </body>, Problem gelöst

Benutzer online in diesem Thema