slider show interrupting with blank page when it is fading ?

[johannes999]

hello,

I have found this code from code pen for slider show and it is working perfect but when I paste this code in  my wordpress I get this problem :

https://webdesignleren.com/

the JS code is :

<script>
	
  let slideIndex = 0;
      showSlides();

      function showSlides() {
        let i;
        let slides = document.getElementsByClassName("mySlides");
        let dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
        }
        slideIndex++;
        if (slideIndex > slides.length) {
          slideIndex = 1;
        }
        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";
        setTimeout(showSlides, 3000); // 3000 = Change image every 3 seconds
      }


</script>

HTML CODE is:

	  <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img
          src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg"
          style="width: 100%"
          height="750px"
        />
        <div class="text">SLIDE 1/3</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img      src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080.jpg"
          style="width: 100%"
          height="750px"
        />
        <div class="text">SLIDE 2/3</div>
      </div>

      <div class="mySlides fade">
        <div class="numbertext"></div>
        <img  src="https://webdesignleren.com/wp-content/uploads/2022/12/1920-1080-2.jpg"
          style="width: 100%"
          height="750px"
        />
        <div class="text">SLIDE 3/3</div>
      </div>
    </div>
	<br/>

    <div style="text-align: center">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>

CSS code is :

* {
  box-sizing: border-box;
  margin:0;
  padding:0;
}



      .mySlides {
        display: none;
      }

      img {
        vertical-align: middle;
      }

      /* Slideshow container */
      .slideshow-container {
        max-width: 100%;
        position: relative;
        margin: auto;
      }

      /* Caption text */
      .text {
        color: #f2f2f2;
        font-size: 60px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        text-align: center;
      }

      /* Number text (1/3 etc) */
      .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
      }

      /* The dots/bullets/indicators */
      .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
      }

      .active {
        background-color: #717171;
      }

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

      @keyframes fade {
        from {
          opacity: 0.4;
        }
        to {
          opacity: 1;
        }
      }

I checked everything carefully few times but I couldn't find  the bug.

why it is interrupting , what is the wrong here?

thanks

[johannes999]

thanks,

I have changed animation duration from 1.5s to 4s and the problem is resolved.

 .fade {
        animation-name: fade;
        animation-duration: 4s;
      }