Crea uno slider di immagini con Jquery per un web

Creeremo uno slider sviluppato con Jquery sì Nivo Slider, senza la necessità di un plugin e che possiamo adattare al nostro sito web.

Per fare questo useremo il framework jquery, il quale è un libreria per facilitare il lavoro con il linguaggio Javascript. Scarichiamo la libreria da Jquery.com, è anche possibile che tu possa usarlo tirando googleapis.com usando questo codice nella tua pagina html per aggiungere questo script.

Se lo hai scaricato dalla pagina Jquery e lo hai caricato in una directory del tuo sito web, devi metterlo in modo che punti al tuo dominio come nel seguente esempio:

Ora scarichiamo cursore Nivo quale è Libreria Jquery che ci permetterà di creare lo slider. Da qui puoi scaricare gratuitamente Nivo slider. Decomprimi il file nella nostra directory, qui possiamo vedere la struttura del web.

Ora creeremo un file index.html per il nostro sito Web, nell'intestazione metteremo le librerie e i fogli di stile. Possiamo vedere la libreria Jquery, la libreria nivo slider e i fogli di stile di Nivo slider, quindi possiamo personalizzarli.

Ora creeremo un contenitore per le nostre immagini e per lo slider, per questo e per poterlo mostrare, è stato creato all'interno dello stesso index.html (può anche essere creato in un file di fogli di stile CSS, per adattarsi ognuno).
Partiamo dalla struttura del web e dallo slider stesso, inserendo le immagini da visualizzare e un messaggio.

Quindi attiviamo il plugin nivo Silder e gli inviamo i parametri sul tipo di effetto, il tempo tra l'animazione, la pausa tra l'immagine e molti altri che possono essere visti nella documentazione di Nivo Slider.

Osserviamo che l'id è attivato #silder lo stesso dove definisco le immagini, quindi se voglio avere più di uno slider dovrò replicare la stessa struttura e attivarla per l'id corrispondente.
Il risultato del test index.html in un browser è:

Qui vediamo la seconda diapositiva, sotto vediamo il numero di diapositive 1 e 2 e i collegamenti predefiniti Prev (precedente) Next (next) miglioreremo la visualizzazione di quella utilizzando css.
Possiamo cambiare i numeri in punti semplicemente guardando nivo-silder.css

 .nivo-controlNav {text-align: left; imbottitura: 0; posizione: relativa; indice z: 10; } .nivo-controlNav su {display: inline-block; larghezza: 10px; altezza: 10px; sfondo: url (bullets.png.webp) non ripetibile; rientro del testo: -9999px; bordo: 0; margine: 0 2px; } .nivo-controlNav a.active {posizione-sfondo: 0 100%; } .nivo-directionNav su {display: block; larghezza: 30px; altezza: 30px; sfondo: url (arrows.png.webp) senza ripetizione; rientro del testo: -9999px; bordo: 0; in alto: automatico; in basso: -36px; indice z: 11; } .nivo-directionNav a: hover {background-color: #eee; -webkit-border-radius: 2px; -moz-border-radius: 2px; raggio di confine: 2px; } a.nivo-nextNav {posizione-sfondo: 160% 50%; destra: 0px; } a.nivo-prevNav {posizione-sfondo: -60% 50%; a sinistra: automatico; a destra: 35px; } 

Il risultato di questa modifica saranno i numeri come punti elenco a sinistra ei collegamenti come frecce a destra.

Estenderemo la funzionalità mostrando un blocco di dati in una delle diapositive

Modificando il codice che abbiamo già, cambiamo il paragrafo nella diapositiva 2 per un blocco che chiamerò con un id # block2, quindi creo il blocco e applico uno stile nascosto in modo che sia visibile solo quando viene attivata la diapositiva 2.
Il risultato è il seguente:

Potresti anche inserire immagini in miniatura. Un'altra opzione è generare il contenuto dinamicamente da un mysql e php o utilizzarlo in un modello CMS come joomla o wordpress. Viene fornito con molti plugin già programmati ma con poche righe di codice possiamo creare il nostro componente. Spero ti sia servito.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo