slide w3schools

by marusti

HTML

<div class="slideshow-container">

<div class="mySlides fade">

  <img src="https://images.pexels.com/photos/23496855/pexels-photo-23496855/free-photo-of-meer-strand-ferien-wasser.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
 
  <img src="https://images.pexels.com/photos/20755713/pexels-photo-20755713/free-photo-of-holz-sommer-sonne-gebaude.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
 
  <img src="https://images.pexels.com/photos/5861938/pexels-photo-5861938.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<div class="mySlides fade">
 
  <img src="https://images.pexels.com/photos/20162599/pexels-photo-20162599/free-photo-of-verarbeitet-mit-vsco-mit-u3-voreinstellung.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" style="width:100%">
  <div class="text">Caption Four</div>
</div>

</div>

CSS

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

body {
  font-family: Verdana, sans-serif;
}

.mySlides {
  display: none;
}

/*img {vertical-align: middle;}*/

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

.mySlides img {
  vertical-align: middle;
  height: 100vh
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 11px;
  padding: 8px 12px;
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
}

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

@keyframes fade {
  from {
    opacity: .4
  }

  to {
    opacity: 1
  }
}

@media only screen and (min-width: 36rem) {
  .text {
    font-size: 15px
  }
}

JavaScript

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); // Change image every 2 seconds
}