Een slideshow widget maken

Voor zowel Joomla als Wordpress zijn er uitgebreide slideshow extensies beschikbaar. Maar als je een kleine, eenvoudige slideshow op je website wilt plaatsen, dan kun je deze ook maken met HTML en CSS.

In dit artikel zal ik je laten zien hoe je met gebruikmaking van alleen HTML en CSS een eenvoudige diavoorstelling kunt maken. Je kunt vervolgens van deze code een widget maken in zowel Joomla als Wordpress.

De slideshow widget maken met HTML en CSS

We zullen eerst de slideshow widget gaan opbouwen met HTML en CSS. Ik zal je in de onderstaande video laten zien hoe je dit doet. Onder de video vind je de betreffende HTML en CSS code. De afbeeldingen dien je zelf toe te voegen.

De HTML code

In de video werd de onderstaande html code gebruikt:

<div class="slideshow">
<img src="/images/plaatje1.jpg" alt="plaatje1">
<img src="/images/plaatje2.jpg" alt="plaatje">
<img src="/images/plaatje3.jpg" alt="plaatje">
<img src="/images/plaatje4.jpg" alt="plaatje">
</div>

Je moet in de bovenstaande code de afbeeldingen wijzigen naar de bestandsnamen van je eigen afbeeldingen.

Je ziet dat de html code erg eenvoudig is. We maken een div aan met de class "slideshow" en in deze div zetten we een aantal afbeeldingen.

Om nu het slideshow effect te krijgen, heb je wat CSS code nodig.

De CSS code

Om van de div met de afbeeldingen een slideshow te maken, gebruiken we de volgende CSS code:

.slideshow {
width:100%;
height:auto;
padding:5px;
box-sizing:border-box;
position:relative;
}

.slideshow img {
position:absolute;
animation:slideshow 20s infinite;
opacity:0;
width: 100%;
height: auto;
}

@keyframes slideshow {
25%{opacity:1;
}
45%{
opacity:0;
}
}

.slideshow img:nth-child(4){animation-delay:0s;}
.slideshow img:nth-child(3){animation-delay:5s;}
.slideshow img:nth-child(2){animation-delay:10s;}
.slideshow img:nth-child(1){animation-delay:15s;}

Uitleg over de CSS code

Als we eens naar deze CSS code kijken, dan vallen een aantal zaken op. Zo geven we de div met de class slideshow een breedte van 100%. Dit betekent dat de slideshow 100% van de breedte in beslag zal nemen van zijn ouder element. Hierdoor zorg je ervoor dat je slideshow ook op kleinere schermen (mobieltjes) goed getoond wordt.

Je zou de slideshow ook een vaste breedte kunnen geven, maar dan zou er een horizontale scrollbalk kunnen ontstaan op kleinere schermen en is het geheel dus niet mobiel vriendelijk.

Verder zien we dat de plaatjes in de class slideshow (img) een opacity van 0 krijgen. Ze zijn dus volkomen doorzichtig, wat ze dus ook onzichtbaar maakt. En we voegen een animatie toe met de naam slideshow. We stellen de duur in van de animatie (in bovenstaande code 20 seconden) en met "infinite" geven we aan dat de animatie op repeat staat.

Mocht je nou meer willen weten, check dan mijn uitgebreide artikel over CSS animaties.

Met de keyframes bepalen we wat de animatie precies moet zijn. Je ziet dat op 25% van de duur van de animatie de opacity van de afbeelding 1 moet zijn. Dus volledig niet doorzichtig en dus helemaal zichtbaar. En op 45% van de animatie dient de afbeelding weer een opacity van 0 te krijgen, dus volledig doorzichtig.

Hiermee ontstaat het effect dat de afbeelding eerst helemaal doorzichtig is, vervolgens verandert dit in helemaal niet doorzichtig en weer terug naar helemaal doorzichtig. Het plaatje verschijnt en verdwijnt dus weer.

In het laatste stukje CSS code zie je dat we voor elk van de afbeeldingen aangeven wanneer de animatie precies moet beginnen. De totale duur van de animatie is 20 seconden. De animatie begint meteen voor plaatje 4. Na 5 seconden volgt de zelfde animatie voor plaatje 3. Na 10 seconden plaatje 2 en na 15 seconden plaatje 1. En daarna begint het weer van voren af aan.

Trouwens, in het laatste stukje CSS code zit een handige functie. Je kunt namelijk van een bepaald element exact het betreffende kind elementen stylen met nth-child. De class slideshow heeft 4 kind elementen, de 4 plaatjes. Je kunt hiermee precies bepalen wat moet gelden voor welk plaatje.

Wanneer je bijvoorbeeld styling wilt regelen voor het derde plaatje, dan gebruik je nth-child(3). Mocht je meer hierover willen weten, kijk dan op deze pagina over nth-child.

De slideshow widget gebruiken in Joomla

Het is heel eenvoudig om bovenstaande slideshow als een widget in Joomla te plaatsen. Zie hiervoor de onderstaande video:

De slideshow widget gebruiken in Wordpress

Mocht je deze slideshow als widget willen toevoegen in je Wordpress site, check dan deze video:

You have no rights to post comments