Slideshow

Slideshow met javascript en CSS 

OPGELET:
Gebruik enkel liggende foto's (landschapsfoto's) geen portretten. 
Best zorg je ervoor dat alle foto's exact dezelfde pixelverhoudingen hebben. 

Op internet vind je tientallen technieken om een slideshow te bouwen met CSS en javascript. Hieronder vind je een voorbeeld van hoe je relatief snel een slideshow aan je pagina toevoegt. We gebruiken een combinatie van HTML, CSS en javascript. 

Bekijk een live voorbeeld:  https://www.leerschool.be/api/examples/portfolio.html

De CSS-code

Voeg de onderstaande CSS-code toe aan je CSS-bestand. 

Opgelet: als je meerdere slideshows aan je site of webpagina's toevoegt, dan moet je deze code slechts één keer toevoegen. 
.slideshow{
    width:100%;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
}
.slideshow figure{
    flex: 0 0 100%;
    height:100%;
    position:relative;
    background-size:cover;
    background-position:center center;
}

.slideshow figcaption{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
@keyframes animMarg {
    0% {margin-left: 0px;}
}

Javascriptcode toevoegen

Vervolgens voeg je een stuk javascriptcode toe aan de pagina waarop je een slideshow wil weergeven. Je voegt die code toe net voor </body>. 

<script src="https://www.leerschool.be/api/js/slideshow.js"></script>

De eigenlijke slideshow: HTML

De eigenlijke slideshow voeg je toe via een <section>-element dat je de stijlklasse "slideshow" geeft. Zo'n section geven we nog 2 extra attributen mee... 

  • data-seconds: daarin bepaal je hoe lang een schuifbeweging (slide) duurt. 
  • data-height: daarin bepaal je hoe hoog de slideshow is. Je kan zowel een hoogte in pixels als een hoogte in "vh" invoeren. 
<section class="slideshow" data-seconds="5" data-height="500px">

</section>

Vervolgens voegen we aan de <section> de <figure>-elementen toe. 

<section class="slideshow" data-seconds="5" data-height="500px">
     <figure>
          <img src="assets/images/product1.jpg"/>
          <figcaption>
             <h3>Tekst bij foto 1</h3>
          </figcaption>
     </figure>
     <figure>
          <img src="assets/images/product2.jpg"/>
          <figcaption>
             <h3>Tekst bij foto 2</h3>
          </figcaption>
     </figure>
     <figure>
          <img src="assets/images/product3.jpg"/>
          <figcaption>
             <h3>Tekst bij foto 3</h3>
          </figcaption>
     </figure>
</section>

Tips om te tweaken

Als je de inhoud van "figcaption" wil vormgeven, dan kan je dat eenvoudig door in je CSS-bestand de volgende regels toe te voegen. De onderstaande code zorgt ervoor dat een <h3>-titelelement in figcaption een witte tekstkleur krijgt en een zachte shaduw. Uiteraard kan je nog je eigen stijlregels toevoegen. 

.slideshow figcaption h3{
    color:white;
    font-size:3rem;
    text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}
Volgende pagina