Magazine Architettura e Design

Slide di immagini in una pagina Html

Da Iwebdesigner @Iwebdesigner_it

Inserire uno slide in pagina Html con NivoSlider

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:

inserire slide in html con nivo slider

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!


Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :

  • Creare CSS per Html 5

    Creare Html

    Nel precendente articolo, abbiamo visto il codice della pagina in Html5, adesso gli attribuiamo il foglio di stile o CSS.Avevamo chiamato il CSS style.css e lo... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Slide Show e Carousel con jQuery

    Slide Show Carousel jQuery

    Spesso e volentieri un web designer quando inizia a costruire un nuovo progetto scrive del gran codice, organizza le pagine in Html, compone CSS, si trova a... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Giochi online in HTML 5

    Giochi online HTML

    Fino ad oggi i giochi on line gratuiti e accessibili da tutti erano fatti in Flash, quindi la domanda nasce spontanea: con HTML5 si possono costruire giochi... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Errori comuni in Html

    Errori comuni Html

    Se ci mettiamo ad analizzare il codice di molti siti web, vediamo che spesso vengono commessi i soliti errori. Questi sono dovuti alle abitudini di scrittura no... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Inserire video nella pagina Html

    Inserire video nella pagina Html

    Uno degli aspetti che hanno fatto la fortuna del web e’ la possibilita’ di aggiungere alle pagine grafica, suoni, animazioni e filmati. In passato le... Leggere il seguito

    Da  Iwebdesigner
    CONSIGLI UTILI, EBUSINESS, TECNOLOGIA
  • Caratteristiche Tecniche del myTouch 4G Slide (a.k.a HTC Doubleshot) !

    Nelle ultime settimane si è spesso parlato di un inedito terminale HTC che porta il nome di HTC Doubleshot, di cui si è potuto vedere solo qualche immagine... Leggere il seguito

    Da  Riccardo Conti
    TECNOLOGIA
  • Joomla: Italianizziamo il modulo Facebook Slide Likebox

    Joomla: Italianizziamo modulo Facebook Slide Likebox

    Qualche mese fa, quando inaugurai la mia (poco fortunata) pagina di Facebook vi parlai dell'interesantissimo Facebook Slide Likebox, un modulo di Joomla,... Leggere il seguito

    Da  Faster
    TECNOLOGIA