Bekijk een demo. De slideshow bedien je met de scrollfunctie van je muis of trackpad: https://www.schoolvoorbeeld.be/nodig/test/index2.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?v13"></script>
De HTML-structuur verwacht een DIV-element met daarin een een reeks afbeeldingen. De grootte van de afbeeldingen (aantal pixels) speelt geen rol.
<div id="myalbum">
<img src="images/001.jpg"/>
<img src="images/002.jpg"/>
<img src="images/003.jpg"/>
<img src="images/007.jpg"/>
<img src="images/005.jpg"/>
<img src="images/004.jpg"/>
<img src="images/006.jpg"/>
<img src="images/008.jpg"/>
</div>
Met één enkele instructie kan je het HTML-element nu omtoveren in een slider die werkt met het muiswiel. De hoogte kan je instellen in pixels of in vh (viewport height = waarde van 1 tot 100).
<script>
$(function(){ $("#myalbum").CrowlWideSlide({ height:"80vh" }); }) </script>