Considerata la finalità di questo componente, oltre che ovviamente il suo markup, il modo più semplice ed immeditato per poterlo implementare all’interno del proprio sito Passweb è quello di ricorrere al Componente HTML.

In queste condizioni infatti, posto di aver inserito tramite il layout di Pagina e/o di Variante i collegamenti a tutte le librerie css e js necessarie per il corretto funzionamento dello Slider, sarà poi sufficiente inserire all’interno del componente HTML uno dei markup esaminati nei precedenti capitoli e necessario per realizzare lo Slideshow secondo le specifiche esigenze del caso.

Per quel che riguarda il collegamento alle varie librerie CSS è possibile, come al solito, seguire due strade differenti:

• Caricare le librerie (slideshow.css e slidenav.css) dalla sezione “Inclusione nella pagina” del Layout, gestendole quindi come file esterni al Wizard.

In queste condizioni le regole css necessarie per la corretta formattazione del componente verranno applicate solo lato front-end

• Inserire il contenuto dei file slideshow.css e slidenav.css direttamente all’interno della sezione CSS del Layout (come già fatto per la parte core del framework ossia per la libreria uikit.css).

In queste condizioni le regole CSS necessarie per il corretto funzionamento dello Slideshow verranno applicate anche all’interno del Wizard

Supponendo ora di voler implementare uno Slideshow di immagini, privo di autoplay, dotato dei controlli di navigazione e che utilizzi come effetto di transizione tra i diversi contenuti l’effetto scale dovremo inserire all’interno del Componente HTML un markup del tipo di quello qui di seguito indicato

<div style="max-height: 500px;" class="uk-slidenav-position" data-uk-slideshow="{animation: 'scale'}">

<ul class="uk-slideshow" style="height:500px;">

<li style="max-height: 500px;"><img src="/Resources/Graphics/img/slidea.jpg" alt="" style="width: 100%; height: auto;">

</li>

<li style="max-height: 500px;"><img src="/Resources/Graphics/img/slideb.jpg" alt="" style="width: 100%; height: auto;">

</li>

<li style="max-height: 500px;"><img src="/Resources/Graphics/img/slidec.jpg" alt="" style="width: 100%; height: auto;">

</li>

...

</ul>

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

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

</div>

Ancora una volta ,il vantaggio nell’utilizzare il componente HTML è dato dalla possibilità di replicare esattamente il markup richiesto da uikit per ottenere la configurazione dello slideshow desiderata senza doversi quindi preoccupare di quello che è il markup generato in automatico da Passweb.

Lo svantaggio è rappresentato invece dal fatto di dover gestire tutto, dai contenuti (nel caso in esame semplici immagini) alla loro formattazione grafica, lato codice.

E’ possibile trovare un esempio di Slideshow, implementato mediante l’utilizzo del Componente HTML, nella Home Page del modello di riferimento