Si è così, si tratta ancora una volta di una slide fatta con jQuery, ma questa volta creata dal sottoscritto partendo da 0.
Durante lo sviluppo/studio ho archiviato la versione 1 che contiene gli elementi essenziali per far muovere delle slide.
Sia nella versione 1 che nella 2 ho inserito sia il css che il codice javascript all'interno del file html.
Finalmente ho capito come poter creare "enne" box (div) e muoverli da sinistra verso destra e viceversa ossia come creare uno slider.
Quello che otterremo può essere semplificato con un esempio. Immaginiamo di avere 3 elementi:
- Un cartoncino in a4 in cui pratichiamo un foro rettangolare, in modo da ottenere una finestra.
- Un binario dove far scorrere il nostro film strip (vedi punto 3)
- Tante immagini della stessa dimensione del foro legata in serie come se creassimo un film strip.
A questo punto la nostra immaginazione farà il resto.
Bene, in html andremo a creare 3 div e a questi andremo ad assocaiare del css per impostarne le caratteristiche. Infine jQuery completarà l'opera animando le slide.
Il primo div deve avere un width fisso, con overflow hidden e con position relative. Questa è la nostra finestra.
Il secondo div contenuto nel primo deve avere un div abbastanza grande da contenere tutte le slide e deve avere position absolute. Questa è il nostro binario.
Il terzo div, o meglio tanti div quanti sono le slide, rappresentano il nostro "film strip". Devono avere Position Relative, float left e un width che determinerà quante slide vogliamo visualizzare contemporaneamente. La stessa width del primo div significa 1 slide visibile per volta; un width pari alla metà del primo div vuol dire 2 slide contemporaneamente visibili e cosi via.
Nel codice ho cercato di inserire il minimo indispensabile in modo da poter mettere in evidenza il solo codice utile per le slide. Ho tralasciando volutamente il completamento di alcuni tag richiesti da una pagina html. I commenti all'interno della pagina sono inglese (maccheronico ;-). Questa pagina è in italiano ma "facilmente" traducibile da google translator, i commenti dentro la pagina no.
Caratteristiche:
- Auto avanzamento da sinistra verso destra e da destra verso sinistra ogni 4 secondi.
- Click sulla slide fa avanzare alla slide successiva.
- Fastidioso fadeIn/fadeOut durante l'avanzamento della slide: è stato messo solo per capire come poter inserire altri effetti durante l'avanzamento della slide.
La slide è visibile al seguente indirizzo : myslidev1
Salva la pagina in locale ed aprila con il notepad o meglio con notepad++
Ecco alcune immagini che possono contribuire a capirne il meccasmo.
-
myslide google inspector film strip simulation -
myslide google inspector left
