Je hebt verschillende soorten sliders. Stel het doel van je website in vraag (bedrijfssite, eductatief,entertainment, ...), wat past hierbij het beste? ). Ik heb al met volgende sliders gewerkt:

  1. comSlider
    comSlider (apart programma)
  2. Parallel slider
    Parallel slider
  3. W3 schools slideshow
    https://www.w3schools.com/w3css/w3css_slideshow.asp
  4. Wow slider Wow slider (apart programma)
  5. Owl Carousel
    https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

Slideshow w3schools

HTML-code

<div class="w3-content w3-display-container">
<img class="mySlides" src="img_nature.jpg">
<img class="mySlides" src="img_snowtops.jpg">
<img class="mySlides" src="img_mountains.jpg">
<div class="w3-center w3-display-bottommiddle" style="width:100%">
<div class="w3-left" onclick="plusDivs(-1)">❮</div>
<div class="w3-right" onclick="plusDivs(1)">❯</div>
<span class="w3-badge demo w3-border" onclick="currentDiv(1)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(2)"></span>
<span class="w3-badge demo w3-border" onclick="currentDiv(3)"></span>
</div>
</div>

CSS-code

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.mySlides {display:none;}
</style>

JavaScript, plaats je boven de eindtag </body>


<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  
}
</script>