CrowlKit - Image Swiper

Libraries toevoegen

Voor deze functionaliteit zijn geen extra libaries nodig. Zorg dat onderstaande wel aanwezig zijn in de head:

<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">
<script src="https://cdn.publihub.media/lib/app.js?v2"></script>

Een slider toevoegen

In een app-slider-element kan je meerdere afbeeldingen opnemen:

<app-slider id="mySlider" width="600" height="500">
  <img src="clothes/dress1.png">
  <img src="clothes/dress2.png">
  <img src="clothes/dress3.png">
  <img src="clothes/dress4.png">
</app-slider>

Wil je de foto's, of sommige daarvan, ook voorzien van een regel tekst, dan kan dit op de volgende manier:

<app-slider id="mySlider" width="600" height="500">
    <figure>    
        <img src="clothes/dress1.png">
        <figcaption>Zwart kleed</figcaption>
    </figure>
    <img src="clothes/dress2.png">
    <img src="clothes/dress3.png">
    <figure>    
        <img src="clothes/dress4.png">
        <figcaption>Rood kleed</figcaption>
    </figure>
</app-slider>

Een app-slider kent 3 attributen:

  • id: een uniek id voor het element. Het element heeft een "id" nodig om er door te kunnen swipen.
  • width: de breedte van de slider. De breedte kan in pixels of "vw". Bijvoorbeeld width="300px" of width="30vw". Als je schrijft width="300", dan wordt het automatisch omgezet in pixelwaarden.
  • height: de hoogte van de slider. De hoogte kan in pixels of "vh". Bijvoorbeeld height="500px" of height="40vh". Als je schrijft height="500", dan wordt het automatisch omgezet in pixelwaarden. 

KitCode om te swipen

Swipen door de afbeeldingen kan je door een knop toe te voegen of door het aan te sturen met je stem of handgebaren.... In het onderstaande voorbeeld voegen we een knop toe:

<button id="swiper">Volgend kleed</button>

Vervolgens voegen we de code toe:

id("swiper").after("click").do(
    function(){
        id("mySlider").after("swipe").send();
    }
);

Demo

Bekijk de demo:  https://cdn.publihub.media/demos/app/swiper.html 
Bekijk de broncode:  https://cdn.publihub.media/viewsource/?url=https://cdn.publihub.media/demos/app/swiper.html
Volgende pagina