De CrowlSlideShow-plugin tovert een reeks afbeeldingen om in een slideshow.
Werkend voorbeeld: https://www.schoolvoorbeeld.be/websites/plugins/slideshow.php
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken.
<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v16"></script>
Je maakt een div-element en je geeft het een bepaald (uniek) id. In dat element plaats je een aantal <img>-markeringen voor afbeeldingen.
<div id="album">
<img src="images/foto1.jpg"/>
<img src="images/foto2.jpg"/>
<img src="images/foto3.jpg"/>
</div>
Je hoef dus niets speciaals te doen. Je kan de slideshow nu activeren:
<script>
$("#album").CrowlSlideShow();
</script>
De plugin begrijpt ook bepaalde parameters:
<script>
$("#album").CrowlSlideShow({
background: "orange",
border: "1px solid red",
height: "300px",
width: "100vw"
});
</script>
Uiteraard kan je de waarde van die parameters aanpassen.