Slide di immagini in una pagina Html

Tante volte ci capita di dover inserire in una pagina Html, uno slider o un carosello per alcune immagini. Girovagando in rete troviamo milioni di plugin, ma quale scegliere e’ sempre difficile. Sperimentandone sempre di nuovi, voglio soffermarmi su quello piu’ semplice, che svolge al massimo il suo dovere e che e’ facile da inserire nella nostra pagina Html. Insomma uno slideshow bello ma che non impegna: NivoSlider!

Partiamo. Apriamo la pagina Html, posizioniamoci sulla riga dove vogliamo che appaia lo slide e scriviamo:

//la classe se la vogliamo modificare bisogna modificare anche il file style.css
//img che vogliamo inserire



Questo e' un esempio in HTML di slide caption con  un link.

Questo codice inserisce all’interno del nostro div la galleria slide, con le relative immagini che vogliamo far visualizzare. Per incorporare NivoSlider, dobbiamo inserire i riferimenti al codice css della galleria e agli script jquery della stessa.

Partiamo dal foglio di stile.

In riferimento al codice Html, all’interno del dobbiamo inserire queste righe:

Script Jquery.

Sempre nella sezione della nostra pagina Html, inseriamo anche:

Una volta inserito tutto questo nel nostro codice Html, se lanciamo la pagina, otterremo una pagina del genere:

Il gioco e’ fatto, abbiamo inserito una galleria all’interno della nostra pagina. Se volessimo cambiare le dimensione delle foto, la posizione e quanto altro ancora, dobbiamo intervenire sul file, gia’ integrato nel Html, chiamato style.css…Ma questo lo vedremo in un prossimo articolo.

Demo

Download

Avete provato ad installare questa galleria? Condividete la vostra esperienza!