Video návody

V několika krocích si ukážeme, jak vyměnit úvodní obrázek za slider. Pro ukázku máme vybranou šablonu Jerry.

Kód pro slider:
<div class="slideshow-container">
  <div class="mySlides">
    <img src="" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="" style="width:100%">
  </div>
</div>

CSS(styly) pro slider:
.slideshow-container {
  position: relative;
  margin: auto;
}
.mySlides {
  display: none;
}

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

function showSlides() {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.display = "block";
  setTimeout(showSlides, 4000);
}
</script>