Creare una SlideShow con Jquery e CSS

Vediamo in questo semplice esempio come costruire una slide con le istruzione html e jquery e css. Ovviamente partiremo dall’instanziare il container , il colore e la formattazione del testo utilizzando il CSS

CSS per creare una Slideshow

Quindi creeremo lo slideshowcontainer per creare un contenitore all’interno del quale andremo a lavorare. I bottoni previuous e next per scorrere in avanti e indietro le immagini della nostra slideshow e text e ntext per la formattazione del testo e per il colore del testo alla fine otterremo le seguenti istruzioni di foglio di stile.

Jquery per Creare una Slide Show

Una volta fatto questo i metodi del CSS tramite le varie classi saranno quindi passate dall’html al Linguaggio Jquery.

Nello specifico utilizzeremo la funzione showslides per visualizzare la funzionare desiderate. Gli elementi verranno invece letti tramite la funzione getElementsByClassName . Mentre per farli scorrere e visualizzarli utilizzeremo il ciclo for con il metodo style.display che a seconda del bottone previuous o next che avrete cliccato si occupererà di scorrere in avanti oppure indietro le immagini che avrete caricato. Oggettivamente è un esempio molto semplice a cui abbiamo aggiunto un minimo di commento , ma nulla di particolare. Se volete l’esempio integrale comprensivo del codice sorgente che abbiamo utilizzato lo potete trovare su github utente sladfive progetto jquery-slideshow.

Ovviamente per qualsiasi domanda dubbio o perplessità chiedete pure senza problemi. L’esempio in se e per se lo potete invece trovare direttamente su Esempio Pratico Slide Jquery. Se avete bisogno di rivedere i linguaggi vi lasciamo questi collegamenti con delle brevi guide riassuntive di

• Linguaggio Jquery
• Lingaggio CSS