< Inhoudstafel

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>
  1. CSS imagegallery
    w3 schools
  2. Mobirise
    Mobirise bootstrap (apart programma)

Responsive Fotogalerij

Maak nu zelf een fotoalbum gebasseerd op de eigenschap flexbox. Bekijk hier het voorbeeld.

gallerij 
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.header {
  text-align: center;
  padding: 32px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

<body>

<!-- Header -->
<div class="header">
  <h1>Responsive Image Grid</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<!-- Photo Grid rij 1 -->
<div class="row">
  <div class="column">
    <img src="/w3images/wedding.jpg" style="width:100%">
    <img src="/w3images/rocks.jpg" style="width:100%">
...
  </div>
 </div>
</body>

Bekijk het voorbeeld hier.