Nella configurazione di default il passaggio tra un contenuto e l’altro dello Slideshow avviene utilizzando l’effetto fade.

Volendo è possibile utilizzare anche un effetto di transizione differente indicandolo come valore dell’opzione animation all’interno dell’attributo data-uk-slideshow

Considerando ad esempio un markup di questo tipo:

<div class="uk-slidenav-position" data-uk-slideshow="{autoplay:true, animation: 'scale'}">

<ul class="uk-slideshow">

<li><img src="…" width="…" height="…" alt="…"></li>

<li><img src="…" width="…" height="…" alt="…"></li>

<li><img src="…" width="…" height="…" alt="…"></li>

...

</ul>

<a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideshow-item="previous"></a>

<a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideshow-item="next"></a>

</div>

otterremo uno Slideshow con avanzamento automatico, dotato dei pulsanti di “precedente” e “successivo” e in cui il passaggio da un contenuto all’altro avverrà utilizzando l’effetto scale

ATTENZIONE: Per maggiori informazioni relativamente ai diversi effetti di transizione che è possibile attivare, oltre che per esempi live di tali effetti si consiglia di fare riferimento alla pagina della documentazione ufficiale (http://getuikit.com/docs/slideshow.html ). Come indicato all’interno di questa pagina, per poter utilizzare determinati effetti di transizione è necessario inserire nella sezione head della pagina anche il collegamento alla libreria slideshow-fx-js