Come evidenziato nel precedente capitolo di questa guida per poter implementare correttamente il componente Slideshow di uikit è necessario caricare all’interno del sito, oltre alla parte core del framework (uikit.css e uikit.js) anche le librerie css e js utilizzate in maniera specifica da questo componente.

La prima cosa da fare sarà quindi verificare di aver inserito nella sezione < head > della pagina in cui sui vuol implementare questo componente i collegamenti alle librerie slideshow.css e slideshow.js (o meglio ancora alla loro versione minificata)

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

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

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

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

ATTENZIONE! La libreria slideshow.js deve necessariamente essere caricata dopo la libreria uikit.js

Fatto ciò sarà poi necessario definire l’elenco dei contenuti dello Slideshow utilizzando per questo un apposito elenco puntato, tag < ul >, in cui ogni contenuto dovrà essere gestito come un punto dell’ elenco, e andrà quindi posizionato all’interno di un tag < li >.

Inoltre sarà necessario assegnare al tag < ul > anche:

• La classe .uk-slideshow necessaria per identificare l’elenco dei contenuti dello slideshow
• L’attributo data-uk-slideshow necessario per poter attivare le funzioni javascript che garantiscono il corretto funzionamento del componente

In questa configurazione di base quindi il markup al quale fare riferimento sarà esattamente il seguente:

<ul class="uk-slideshow" data-uk-slideshow>

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

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

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

..

</ul>

In realtà il markup sopra evidenziato seppur corretto non ci consente di ottenere uno Slideshow completamente funzionante in quanto non contempla una modalità di scorrimento tra si suoi contenuti, per cui nelle condizioni sopra indicate verrà sempre e solo visualizzato il primo contenuto dello Slideshow.