Per cercare di risolvere il problema evidenziato nel capitolo precedente e fare quindi in modo di poter scorrere i diversi contenuti dello Slideshow è possibile procedere in due modi differenti: abilitare l’autoplay oppure implementare appositi pulsanti di navigazione.

AUTOPLAY

Per poter abilitare l’autoplay facendo quindi scorrere in automatico i diversi contenuti dello Slideshow è sufficiente utilizzare nell’attributo data-uk-slideshow l’opzione autoplay:true

Il seguente markup

<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">

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

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

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

...

</ul>

ci consente quindi di ottenere un semplice slideshow di immagini che scorrono tra di loro in maniera completamente automatica (utilizzando come effetto di transizione il fade)

PULSANTI DI NAVIGAZIONE

Oltre all’avanzamento automatico è possibile abilitare anche appositi pulsanti di navigazione tra un contenuto e l’altro.

In questo senso è possibile ricorrere ancora una volta al componente Slidenav esattamente allo stesso modo di quanto fatto per lo Slider esaminato nei precedenti capitoli di questa guida.

Per prima cosa sarà quindi necessario inserire tra le librerie incluse nella sezione < head > della pagina anche il collegamento alla libreria necessaria per il corretto funzionamento del componente Slidenav:

<link rel="stylesheet" href="uikit.css" />

<link rel="stylesheet" href="slideshow.css" />

<link rel="stylesheet" href="slidenav.css" />

<script src="uikit.js"></script>

<script src="slideshow.js"></script>

Fatto questo per poter poi attivare i pulsanti di navigazione sullo slideshow sarà necessario:

• Racchiudere l’elenco dei contenuti dello Slideshow (quindi il tag < ul >) all’interno di un contenitore (tag < div >) più esterno al quale assegnare:
• L’attributo data-uk-slideshow precedentemente assegnato al tag ul
• La classe .uk-slidenav-position
• Inserire all’interno del precedente contenitore due link (tag < a >) che serviranno per creare i pulsanti di precedente e successivo e ai quali dovrà essere assegnata:
• la classe .uk-slidenav
• la classe .uk-slidenav-previous, per il pulsante “precedente” e quella .uk-slidenav-next, per il pulsante “successivo”
• l’attributo data-uk-slideshow-item="previous", per il pulsante “precedente” e quello data-uk-slideshow-item="next", per il pulsante “successivo”

Considerando quindi un markup di questo tipo:

<div class="uk-slidenav-position" data-uk-slideshow>

<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>

nel momento in cui dovessimo passare con il mouse sullo Slideshow compariranno i due pulsanti grazie ai quali poter passare alla slide precedente o a quella successiva.