CrowlWideSlide

Terug

CrowlWideSlide

Bekijk een demo. De slideshow bedien je met de scrollfunctie van je muis of trackpad: https://www.schoolvoorbeeld.be/nodig/test/index2.php

1. Integreer jQuery in je webpagina

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

2. Integreer de plugin.

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>

3. De HTML-structuur

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>

4. De javascriptcode

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>