Come creare uno slider di contenuti o galleria fotografica con solo JavaScript puro, senza jQuery

Questa è una soluzione molto utile specialmente in quei casi in cui non si vuole includere un intero framework JavaScript come per esempio jQuery. Di solito il codice che ci interessa è solo una minima parte del framework e includerlo tutto sarebbe un inutile spreco di risorse, specialmente in trasferimento dati dal nostro server al cliente. In questi casi scrivere una soluzine specifica risulta molto più conveniente, anche se un pò più complessa.

Come funziona lo slider o galleria di immagini JavaScript?

Questo slider, oltre a fare scorrere immagini può fare scorrere qualsiasi contenuto HTML. Lo slider è costruito a partire da un DIV genitore e dei DIV figli per ogni elemento che si vuole fare scorrere. Cosa si inserisce all'interno dei DIV figli è indifferente. Si possono creare in questo modo gallerie di immagini con JavaScript puro, commenti che scorrono o altro.

Ci sono molte impostazioni impostabili via codice per questo slider JavaScript.

  • Lo slider può fare vedere un solo elemento che scorre alla volta oppure più di uno. Se più di uno, gli elementi scorreranno a gruppi di due, tre o più elementi.
  • Si può fare fermare lo slider all'ultimo elemento o fare scorrere lo slider all'infitito. In questo caso lo slider continuera a ciclare con gli elementi presenti nello slider.
  • Se può disabilitare la funzionalità di scrolling automatico, il che significa che al caricamento dello slider gli elementi non scorreranno fino a che l'utente non decidera di farli scorrere attraverso i bottoni presenti.
Si possono implementare altre impostazioni che in questa versione dello slider non sono state implementate, ma con un po di modifiche del codice, il lavoro non dovrebbe risultare molto complicato.

Esempi di slider o gallerie immagini con varie impostazioni

Slider con un solo DIV, si ferma all'utlimo DIV, scorrimento automatico

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
// il codice per attivare lo slider
// primo paramtero, sa1 è l'id del div contenitore
// secondo paramtero, 1 indica se lo slider deve scorrere automaticamente oppure no, 0 per non scorrere, 
// terzo parametro, 4000 sono i milisecondi tra uno scorrimento e l'altro, 
// quarto parametro, 1 il numero di div visibili ad ogni scorrimento, 
// quinto parametro, 0 indica se lo slider deve scorrere all'infinito oppure fermarsi all'ultimo elemento o gruppo di elementi visibili
new jsSlider("sa1", 1, 4000, 1, 0)

Slider con due DIV visibili, scorre all'infinito, scorrimento automatico

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
new jsSlider("sa2", 1, 4000, 2, 1)

Slider con tre DIV visibili, si ferma all'ultimo gruppo di DIV, scorrimento automatico

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
new jsSlider("sa3", 1, 4000, 3, 0)

Slider con un solo DIV visibile, scorrimento manuale

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
new jsSlider("sm1", 0, 4000, 1)

Slider con due DIV visibili, scorriemento manuale

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
new jsSlider("sm2", 0, 4000, 2)

Slider con tre DIV visibili, scorrimento manuale

1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
4. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
5. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
6. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ligula scelerisque, consequat lacus non, fermentum lorem. Morbi consectetur faucibus eros, vitae consequat nulla tincidunt eu. Mauris vitae purus in erat efficitur tempor sed nec nibh. In ipsum risus, condimentum vitae ex ut, mattis posuere sem. Aliquam non purus libero. Vestibulum eu sodales sapien. Maecenas condimentum dolor at lacus tempus tincidunt. Nulla eget dignissim turpis, sed porttitor diam. Nunc vitae enim erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vestibulum velit sed vulputate varius. Sed sit amet justo viverra, aliquam augue vel, egestas erat. Aenean sodales sapien purus, eu dignissim arcu rutrum quis. Nunc id lacus risus. Integer sed libero erat. Fusce cursus, sem et pellentesque egestas, velit justo ultrices enim, non iaculis magna nulla eu lectus. Nam ut dictum urna. Suspendisse sed odio ligula. Vivamus lobortis nisl ac sagittis accumsan. Morbi vitae massa tincidunt, sagittis enim at, rhoncus lectus. Aliquam erat volutpat. Suspendisse dapibus odio nec quam ornare lacinia.
new jsSlider("sm3", 0, 4000, 3)

Come funziona il codice dello slider o galleria immagini con solo JavaScript?

Il codice ha tre parti l'HTML, il CSS e il JavaScript. Il codice CSS non è molto importante poichè ognuno lo può modificare a piacimento per adattarsi alle proprie neccessità. Il codice JavaScript è la parte più importante e l'utilizzo è molto semplice.

document.addEventListener( 'DOMContentLoaded', function () {
	sliders.push(new jsSlider("sa1", 1, 4000, 1, 0));
	sliders.push(new jsSlider("sa2", 1, 4000, 2, 1));
	sliders.push(new jsSlider("sa3", 1, 4000, 3, 0));
	sliders.push(new jsSlider("sm1", 0, 4000, 1));
	sliders.push(new jsSlider("sm2", 0, 4000, 2));
	sliders.push(new jsSlider("sm3", 0, 4000, 3));
}, false );

Con l'utilizzo di addEventListener si avvia lo slide al caricamento del DOM, basta richiamare new jsSlider sull id del DIV per attivare lo slider.

Codice JavaScript

var helpers = {};
helpers.once = function (fn, context) { 
	var result;
	return function() { 
		if(fn) {
			result = fn.apply(context || this, arguments);
			fn = null;
		}
		return result;
	};
};
helpers.isset = function () {
	var a = arguments, l = a.length, i = 0, undef;
	if (l === 0) {
		throw new Error('Empty isset');
	}
	while (i !== l) {
		if (a[i] === undef || a[i] === null) {
			return false;
		}
		i++;
	}
	return true;
};
helpers.empty = function (mixed_var) {
	var undef, key, i, len;
	var emptyValues = [undef, null, false, 0, '', '0'];
	for (i = 0, len = emptyValues.length; i < len; i++) {
		if (mixed_var === emptyValues[i]) {
			return true;
		}
	}
	if (typeof mixed_var === 'object') {
		for (key in mixed_var) {
			return false;
		}   
		return true;
	}
	return false;
};
helpers.returnStyle = function (el, styleProp) {
	var x = undefined;
	if (this.isset(el.currentStyle)) {
		x = el.currentStyle[styleProp];
	} else if (this.isset(window.getComputedStyle)) {
		x = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
	}
	if(this.empty(x)) {
		x = '0px';
	}
	return x;
};
helpers.resetSliders = function (sliders) {
	for (var i = 0; i < sliders.length; i++) {
		sliders[i].resetSlider();
	}
};

// int - id to apply, 
// loop - loop or not, 
// sliderIntervalTime - milisecconds between loops, 
// divsNumberShow - number of divs inside container, 
// infiniteLoops - loop infinitely or not 
var jsSlider = function(id, loop, sliderIntervalTime, divsNumberShow, infiniteLoops) {
	var self = this;
	this.container = undefined;
	this.containerMarginRight = 0;
	this.containerMarginLeft = 0;
	this.containerPaddingRight = 0;
	this.containerPaddingLeft = 0;
	this.containerBorderLeftWidth = 0;
	this.containerBorderRightWidth = 0;
	this.sliderInterval = undefined;
	this.tr = undefined;
	this.divs = undefined;
	this.numCallsInteval = 0;
	this.infiniteLoops = 0;
	this.loop = 0;
	this.containerWidth = 0;
	this.containerInner = 0;
	this.sliderIntervalTime = 4000;
	this.deviation = 0;
	this.divsNumberShow = 1;
	this.divsMarginRight = 0;
	this.divsMarginLeft = 0;
	this.divsPaddingRight = 0;
	this.divsPaddingLeft = 0;
	this.divsBorderLeftWidth = 0;
	this.divsBorderRightWidth = 0;
	this.pager = undefined;
	this.pagerCounter = 0;
	this.hideNext = function () {
		self.showNextPrev();
		var ctrlSelectors = self.container.getElementsByClassName("ctrl-selector");
		ctrlSelectors[1].style.display = 'none';
	};
	this.hidePrev = function () {
		self.showNextPrev();
		var ctrlSelectors = self.container.getElementsByClassName("ctrl-selector");
		ctrlSelectors[0].style.display = 'none';
	};
	this.showNextPrev = function () {
		var ctrlSelectors = self.container.getElementsByClassName("ctrl-selector");
		for (var i = 0; i < ctrlSelectors.length; i++) {
			ctrlSelectors[i].style.display = 'block';
		}
	};
	this.showHideNextPrev = function () {
		var currentPagerLength = ((Math.ceil(self.divs.length / self.divsNumberShow)) - 1);
		if(!self.loop && (self.pagerCounter === currentPagerLength)) {
			self.hideNext();
		} else if(!self.loop && self.pagerCounter === 0) {
			self.hidePrev();
		} else {
			self.showNextPrev();
		}
	};
	this.pagerReset = function () {
		var pagerElements = self.pager.getElementsByClassName("pager-element");
		for (var i = 0; i < pagerElements.length; i++) {
			if(pagerElements[i].className === 'pager-element activated') {
				pagerElements[i].className = 'pager-element';
				break;
			}
		}
		pagerElements[0].className += ' activated';
	};
	this.pagerMove = function () {
		var pagerElements = self.pager.getElementsByClassName("pager-element");
		var activatedElement = 0;
		for (var i = 0; i < pagerElements.length; i++) {
			if(pagerElements[i].className === 'pager-element activated') {
				pagerElements[i].className = 'pager-element';
				activatedElement = self.pagerCounter;
			}
		}
		var activatedCounter = activatedElement < 0 ? pagerElements.length - 1 : activatedElement % pagerElements.length;
		pagerElements[activatedCounter].className = 'pager-element activated';
	};
	this.showPagerSlide = function (counter) {
		var currentPagerLength = ((Math.ceil(self.divs.length / self.divsNumberShow)) - 1);
		self.pagerCounter = (counter < 0 ? currentPagerLength : (counter > currentPagerLength ? 0 : counter));
		self.showHideNextPrev();
		for (var i = 0; i < self.divs.length; i++) {
			if(self.loop && self.pagerCounter === 0) {
				self.divs[i].style.right = '0px';
			} else if(self.loop && self.pagerCounter === (self.divs.length - 1)) {
				self.divs[i].style.right = (currentPagerLength * (self.containerInner)) + 'px';
			} else {
				self.divs[i].style.right = (self.pagerCounter * self.containerInner) + 'px';
			}
		}
		self.pagerMove();
	};
	this.showPagerSlideStopInterval = function (counter) {
		self.showPagerSlide(counter);
		self.stopSlider();
	};
	this.showNextSlide = function () {
		self.pagerCounter++;
		self.showPagerSlide(self.pagerCounter);
	};
	this.showNextSlideStopInterval = function () {
		self.showNextSlide();
		self.stopSlider();
	};
	this.showPrevSlide = function () {
		self.pagerCounter--;
		self.showPagerSlide(self.pagerCounter);
	};
	this.showPrevSlideStopInterval = function () {
		self.showPrevSlide();
		self.stopSlider();
	};
	this.stopSlider = helpers.once(function() {
		clearInterval(self.sliderInterval);
	});
	this.startSlider = function () {
		if(self.numCallsInteval > 0) {
			self.showNextSlide();
		}
		else {
			self.stopSlider();
		}
		if(!self.infiniteLoops) {
			self.numCallsInteval--;
		}
	};
	this.resetSlider = function () {
		if(self.loop) {
			self.stopSlider();
		} else {
			self.hidePrev();
		}
		self.recalcConainer();
		self.recalcDeviation();
		for (var i = 0; i < self.divs.length; i++) {
			self.divs[i].style.width = ((self.containerInner - self.deviation) / self.divsNumberShow) + 'px';
			self.divs[i].style.right =  '0px';
		}
		self.pagerReset();
	};
	this.recalcConainer = function () {
		self.containerMarginRight = helpers.returnStyle(self.container, 'margin-right');
		self.containerMarginLeft = helpers.returnStyle(self.container, 'margin-left');
		self.containerPaddingRight = helpers.returnStyle(self.container, 'padding-right');
		self.containerPaddingLeft = helpers.returnStyle(self.container, 'padding-left');
		self.containerBorderLeftWidth = helpers.returnStyle(self.container, 'border-left-width');
		self.containerBorderRightWidth = helpers.returnStyle(self.container, 'border-right-width');
		self.containerWidth = self.container.offsetWidth;

		self.containerInner = 
			self.containerWidth 
			- parseInt(self.containerPaddingRight) 
			- parseInt(self.containerPaddingLeft) 
			- parseInt(self.containerBorderLeftWidth) 
			- parseInt(self.containerBorderRightWidth);
	};
	this.recalcDeviation = function () {
		self.deviation = 
			(parseInt(self.divsMarginRight)
			+ parseInt(self.divsMarginLeft)
			+ parseInt(self.divsPaddingRight)
			+ parseInt(self.divsPaddingLeft)
			+ parseInt(self.divsBorderLeftWidth)
			+ parseInt(self.divsBorderRightWidth)) * self.divsNumberShow;
	};
	this.createSlider = function (id, loop, sliderIntervalTime, divsNumberShow, infiniteLoops) {
		if(helpers.isset(id)) {
			self.loop = helpers.isset(loop) ? loop : 1;  
			self.sliderIntervalTime = helpers.isset(sliderIntervalTime) ? sliderIntervalTime : 4000;
			self.divsNumberShow = helpers.isset(divsNumberShow) ? divsNumberShow : 1;
			self.container = document.getElementById(id);
			var ctrlSelectorNext = document.createElement('span');
			ctrlSelectorNext.id = 'next';
			ctrlSelectorNext.className = 'ctrl-selector';
			ctrlSelectorNext.innerHTML = ' ';
			ctrlSelectorNext.onclick = self.showNextSlideStopInterval;
			self.container.appendChild(ctrlSelectorNext);
			var ctrlSelectorPrev = document.createElement('span');
			ctrlSelectorPrev.id = 'prev';
			ctrlSelectorPrev.className = 'ctrl-selector';
			ctrlSelectorPrev.innerHTML = ' ';
			ctrlSelectorPrev.onclick = self.showPrevSlideStopInterval;
			self.container.insertBefore(ctrlSelectorPrev ,self.container.firstChild);
			self.pager = document.createElement('div');
			self.pager.className = 'pager';
			self.container.appendChild(self.pager);
			self.divs = self.container.getElementsByClassName("element");
			self.divsMarginRight = helpers.returnStyle(self.divs[0], 'margin-right');
			self.divsMarginLeft = helpers.returnStyle(self.divs[0], 'margin-left');
			self.divsPaddingRight = helpers.returnStyle(self.divs[0], 'padding-right');
			self.divsPaddingLeft = helpers.returnStyle(self.divs[0], 'padding-left');
			self.divsBorderLeftWidth = helpers.returnStyle(self.divs[0], 'border-left-width');
			self.divsBorderRightWidth = helpers.returnStyle(self.divs[0], 'border-right-width');
			self.infiniteLoops = helpers.isset(infiniteLoops) ? infiniteLoops : 0;
			self.recalcConainer();
			self.recalcDeviation();
			for (var i = 0; i < self.divs.length; i++) {
				self.divs[i].style.width = ((self.containerInner - self.deviation) / self.divsNumberShow) + 'px';
			}
			for (var i = 0; i < Math.ceil(self.divs.length / self.divsNumberShow); i++) {
				var pagerElement = document.createElement('span');
				pagerElement.className = 'pager-element';
				pagerElement.innerHTML = i + 1;
				if (typeof window.addEventListener === 'function'){
					(function (_i) {
						pagerElement.addEventListener('click', function(){
							self.showPagerSlideStopInterval(_i);
						});
					})(i);
				}
				self.pager.appendChild(pagerElement);
			}
			self.numCallsInteval = Math.ceil(self.divs.length / self.divsNumberShow) - 1;
			if(self.loop) {
				self.sliderInterval = setInterval(function() {
					self.startSlider();
				}, self.sliderIntervalTime);
			} else {
				self.hidePrev();
			}
			self.pagerReset();
		}
	};
	this.createSlider(id, loop, sliderIntervalTime, divsNumberShow, infiniteLoops);
};

var sliders = [];
var resizing;

document.addEventListener( 'DOMContentLoaded', function () {
	sliders.push(new jsSlider("sa1", 1, 4000, 1, 0));
	sliders.push(new jsSlider("sa2", 1, 4000, 2, 1));
	sliders.push(new jsSlider("sa3", 1, 4000, 3, 0));
	sliders.push(new jsSlider("sm1", 0, 4000, 1));
	sliders.push(new jsSlider("sm2", 0, 4000, 2));
	sliders.push(new jsSlider("sm3", 0, 4000, 3));
}, false );

window.addEventListener('resize', function () {
	clearTimeout(resizing);
	resizing = setTimeout(function () {
		helpers.resetSliders(sliders);}, 100);
}, false );

Codice HTML

<div id="sa1" class="quantum-slider">
	<div class="element">
		1. <img style="float:right; margin-left: 15px;" src="../img/lena.gif" width="150" height="150" />  Lorem ipsum dolor sit amet...
	</div>
</div>