Slideshow

Als je een slideshow op een website wilt laten zien dan zijn er vele mogelijkheden om dit te realiseren. Zo zijn er diverse gratis of betaal extensies die je daar prima mee kunnen helpen. Het kan echter ook heel simpel door aan een in een artikel geplaatste afbeeldingen wat UIkit code toe te voegen waardoor je zelf de mooiste slideshows met afbeeldingen of met filmpjes kan maken met diverse mooie effecten. Hoe dit te doen, lees hieronder!

Gebruik

Om een slideshow te maken behoef je enkel de  .uk-slideshow class aan een <ul> element toe te voegen met daarin uitteraard een link de afbeeldingen. Daarnaast is het noodzakelijk om het javascrip attribute  data-uk-slideshow aan te roepen. Om het geheel automatisch te laten scrollen kan je als optie  {autoplay:true} aan het javascript attribute meegeven. Kijk naar het voorbeeld hieronder met de daaronderstaande hiervoor gebruikte code. In dit voorbeeld is gebruik gemaakt van 3 afbeeldingen (dit kunnen er naar wens uiteraard meer zijn) welke geplaatst zijn in de /image map van Joomla! welke via mediabeheer (dit heet tegenwoordig "Media") in die map zijn geupload.

Voorbeeld

Hieronder staat de code van het hierboven gebruikte voorbeeld

<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
      <li><img src="/images/afb1.png" alt="" width="800" height="400" /></li>
      <li><img src="/images/afb2.jpg" alt="" width="800" height="400" /></li>
     <li><img src="/images/afb3.jpg" alt="" width="800" height="400" /></li>
</ul>

Je kan als je dat wenst navigatie aan je slide toevoegen. Als je dit doet moet je uiteraard niet de optie  {autoplay:true} (zie voorbeeld hierboven) aan het javascript attribute meegeven. Om dit moet het  data-uk-slideshow-item attribute worden meegegeven. Dit moet gedaan worden aan elk item. Hieronder een voorbeeld met 2 verschillende navigatie manieren de twee ( <   > ) pijlen (alleen te zien als de muis op de afbeelding staat) en met de 3 dots! Zoals je kan zien kan je beide gebruiken, maar mooier is om geen of 1 van de 2 te gebruiken. Maak je keuze!

Voorrbeeld

Hieronder staat de code van het hierboven gebruikte voorbeeld

<div class="uk-slidenav-position" data-uk-slideshow="">
<!-- Hierboven staat de class met attribute |Hieronder de in een lijst geplaatste afbeeldingen. -->
    <ul class="uk-slideshow">
         <li><img src="/images/afb1.png" alt="" width="800" height="400" /></li>
         <li><img src="/images/afb2.jpg" alt="" width="800" height="400" /></li>
         <li><img src="/images/afb3.jpg" alt="" width="800" height="400" /></li>
    </ul>
<!-- Hieronder de navigatie met 2 pijlen ( < > ) -->
   <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" style="color: rgba(0,0,0,0.4);" data-uk-slideshow-item="previous"></a>
    <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" style="color: rgba(0,0,0,0.4);" data-uk-slideshow-item="next"></a>
<!-- Hieronder staat de navigatie met dots. -->
    <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
         <li data-uk-slideshow-item="0"><a href="#">Item 1</a></li>
         <li data-uk-slideshow-item="1"><a href="#">Item 2</a></li>
         <li data-uk-slideshow-item="2"><a href="#">Item 3</a></li>
    </ul>

</div>

Animaties

Het is mogelijk om de slideshow te laten zien middels verschillende soorten annimaties. Je hoeft hiervoor alleen maar de gewenste animation parameter aan het data-attribute toe te voegen. Hieronder staan de verschillende mogelijkheden vermeld.

Class Beschrijving
fade fades in.
scroll scroll in.
scale scale op en uit.
swipe swipe in en uit.

Voor meer geavanceerde opties voeg het  slideshow-fx.js bestand toe in de "head" van het html bestand.

Class Beschrijving
slice-down slide down in partjes.
slice-up slide up in partjes.
slice-up-down sliced items up en down in partjes.
fold folded in.
puzzle geeft puzzle effect.
boxes geeft box effect.
boxes-reverse geeft box effect andersom.
random-fx bepaald zelf random wisselend bovenstaande opties.
Voorbeelden
  • Scroll

    Scroll

  • Scale

    Scale

  • Swipe

    Swipe

  • Slice down

    Slice Down

  • Slice up

    Slice Up

  • Slice up-down

    Slice Up Down

  • Fold

    Fold

  • Puzzel

    Puzzle

  • Boxes

    Boxes

    • >
  • Boxes reverse

    Boxes Reverse

Markup

Zelfde code als bovenstaande code maar met andere attributen (zie code hieronder).
<ul class="uk-slideshow" data-uk-slideshow="{animation: 'random-fx'}">...</ul>

Voorbeeld van 1 vd gebruikte codes:

Slice down
  <div class="uk-slidenav-position" data-uk-slideshow="{animation: 'slice-down'}">
     <ul class="uk-slideshow">
         <li><img src="/images/afb1.png" alt="" width="800" height="400" /></li>
         <li><img src="/images/afb2.jpg" alt="" width="800" height="400" /></li>
         <li><img src="/images/afb3.jpg" alt="" width="800" height="400" /></li>
     </ul>
 <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" style="color: rgba(0,0,0,0.4);" data-uk-slideshow-item="previous"></a>
 <a href="#" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" style="color: rgba(0,0,0,0.4);" data-uk-slideshow-item="next"></a>

Ken Burns effect

Wie kent het niet, je vindt het mooi of je vind het niks, maar het kan. Het Ken Burns effect kanook aan de slideshow worden toegevoegd. Voeg hiertoe de {kenburns:true} option aan het data attribute toe (dit kan voor zowel afbeeldingen en voor video's).

Voorbeeld

Example

Markup

<div class="uk-slidenav-position" data-uk-slideshow="{kenburns:true, autoplay:true}">
     <ul class="uk-slideshow">
           <li><img src="/images/afb1.png" alt="" width="800" height="400" /></li>
           <li><img src="/images/afb2.jpg" alt="" width="800" height="400" /></li>
           <li><img src="/images/afb3.jpg" alt="" width="800" height="400" /></li>
     </ul>


of hetzelfde met wat vertraging tussen de opeenvolgende slides (kies wat je wilt)

<div class="uk-slidenav-position" data-uk-slideshow="{kenburns:'30s'}">
     <ul class="uk-slideshow">
           <li><img src="/images/afb1.png" alt="" width="800" height="400" /></li>
           <li><img src="/images/afb2.jpg" alt="" width="800" height="400" /></li>
           <li><img src="/images/afb3.jpg" alt="" width="800" height="400" /></li>
     </ul>