Easy Slide [V1]

Questo script ti permette di creare la slide dei tuoi sogni in pochissimi passi. Il cuore di questo script è un attributo denominato data-slide capace di convertire ogni div in una slide efficace. Con oltre 16 effetti, puoi dare un nome ad ogni tab, che verrà visualizzato nei bottoni. Oppure scegli se far navigare l'utente con le frecce. Puoi definire l' autoslide e il suo intervallo, le transizioni e le loro durate, se vuoi che l'autoslide si fermi all'hover...

Il codice per la tua slide potrebbe esserè così corto.


Ancora non sei convinto? Grazie al nostro manuale di personalizzazione nel tab "personalizza" di questa guida, puoi vedere le proprietà e come funzionano. Inoltre la Easy Slide può essere usata anche nei topic. Creare una slide come questa per le presentazioni script sarà un gioco da ragazzi.

Bugs
Nessun bug noto.

Changelog
Nessun changelog.

Prossimi aggiornamenti
- Effetto 3DCube
- Effetto Magic
- Effetto Flip
- Effetto Zoom
- Gestures: touch (per touchscreen)

Personalizzazione Facile (preset)
Gli utenti meno esperti, possono inserire delle impostazioni predefinite. È possibile chiederne dei personalizzati.
data-slide="default"
Queste impostazioni mostrano dei bottoni con i nomi dati alle tab (tramite data-label="NOME") e al click si verrà portati a quel tab con una transizione usando le trasparenze.
L'altezza della slide si adatta al contenuto che viene inserito in ogni tab.


data-slide="slideshow"
Con queste impostazioni i tab scorrono da destra verso sinistra, dopo 5 secondi, la slide scorre in automatico. Anche così l'altezza della slide si adatta in base al contenuto.


data-slide="showcase"
Nelle impostazioni pre-settate "showcase" la slide scorre verso sinistra, finché non raggiunge la fine e torna all'inizio. Sono visibile dei bottoni all'interno della slide che indicano il tab attivo. La tab scorre da sola ogni 5s, tranne se si passa con il mouse sulla slide. Una volta che si è con il mouse sulla slide, si può usare il trackpad (in orizzontale) o la rotteline del mouse (in verticale) per scorrere tra le tab. In alternativa si può cliccare sui bottoni in basso.


data-slide="showcase_no_auto"
Uguale al preset showcase, ma senza lo scorrimento automatico dopo 5 secondi.



Personalizzazione Completa
Qui di seguito viene spiegato come personalizzare completamente la slide.
Le impostazioni usano la stessa sintassi del CSS ovvero proprietà:valore;.
Per esempio: data-slide="effect:opacity;autoslide:3s;duration:500s;"
Di seguito una lista di di properieà con i corrispondenti valori.

effect:
- none : nessuna animazione viene applicata al cambio di tab.
- opacity : transizione dei due tab. Mentre quella attiva diventa meno visibile, il prossimo diventa sempre più visibile.
- opacity{timed} : transizione dei due tab. Prima sparisce quella visibile, poi compare il prossimo.
- scale : mentre il tab attivo rimpicciolisce, il prossimo si ingrandisce.
- scale{timed} : prima il tab attivo si rimpicciolisce fino a sparire, poi il prossimo tab inizia ad ingrandirsi.
- slide : i tab vengono messi in fila e si spostano lateralmente, fino ad entrare completamente nell'area visibile.
- slide{left} : uguale a slide.
- slide{right} : uguale a slide, solo nella direzione opposta.
- slide{top} : il tab successivo corre verso l'alto (il tab attualmente attivo sparisce con impostazione: height:adapt)
- slide{bottom} : uguale a slide{top}, però nella direzione opposta.
- flyin : il tab attivo, sparisce diventando trasparente, il prossimo tab entra con effetto "slide" da sinistra.
- flyin{right} : uguale a flyin.
- flyin{left} : uguale a flyin, solo che il tab successivo entra dalla direzione opposta.
- flyin{top} : il tab attivo si dissolve, mentre il prossimo tab entra con effetto slide dal basso verso l'alto.
- flyin{bottom} : uguale a flyin{top}, solo che il tab successivo entra dalla direzione opposta.
- flyin{right,continue} : uguale a flyin{right}, però il tab attivo non si disslove, ma esce seguendo la direzione di entrata.
- flyin{left,continue} : uguale a flying{right,continue}, però nella direzione opposta.
- flyin{top,continue} : uguale a flying{right,continue}, però i tab si muovono verso l'alto.
- flyin{bottom,continue} : uguale a flying{top,continue}, però nella direzione opposta.

height:
- adapt : l'altezza della slide si adatta al tab attivo.
- [altezza fissa][unità] : si può attribuire un'altezza fissa alla slide, digitando un numero seguito dall'unità. Le unità accettate sono: cm(centimetri), mm(millimetri), in(pollici), px(pixel), pc(pica), em(larghezza del carattere "m"), ex(altezza del carattere "x"), pt(point).

buttons: (i valori vanno separati tramite una virgole, es: buttons: buttons, bullets, arrows;)
- none : nessun bottone viene mostrato.
- buttons : dei bottoni con il testo dei nomi assegnati in data-label vengono generati e al click, portano al relativo tab.
- arrows : genera due tasti con testo "<<" e ">>" che indica il tab precedente, o il tab successivo.
- arrows{LEFT,RIGHT} : genera due bottoni con testo inserito in "LEFT" e quello inserito in "RIGHT".
- bullets : genera dei "pallini" all'interno della slide che indicano il tab attivo (sono anche cliccabili).
- button-inset : uguale a buttons, però i tasti vengon inseriti all'interno della slide (per posizionamento relativo).
- arrow-inset : uguale ad arrows, però i bottoni vengon inseriti nella slide (per posizionamento relativo).

autoslide:
- none : la slide non scorre da sola.
- [numero][unità] : si può inserire un numero seguito da una unità. Le unità accettate sono: s(secondi), ms(millisecondi).

duration: (indica la durata delle animazioni)
- [numero][unità] : si può inserire un numero seguito da una unità. Le unità accettate sono: s(secondi), ms(millisecondo).

style:
- pixel : carica lo stile di default. (non ancora implementata)
- forumfree : la slide cerca di prendere gli stili della skin in uso (su forumfree)
-class{CLASSE} : invece di CLASSE si può inserire una classe a proprio piacimento.

hoverstop:
- true : se "autoslide" è attiva, al passaggio del mouse, l'autoslide si interrompe.
- false : se "autoslide" è attiva, al passaggio del mouse, l'autoslide continua ed ignora il mouse.

gestures: (le opzioni vengono divise da una virgola)
- wheelx : va al tab precedente/successivo in base allo scroll orizzontale del mouse/trackpad. (sopprime scroll pagina)
- wheely : va al tab precedente/successivo in base allo scroll verticale del mouse/trackpad. (sopprime scroll pagina)

Per l'installazione, inserite questo codice in cima al sito.

e in fondo al sito (dopo ogni codice)


Dovete usare questa sintassi

Per imparare ad impostare i parametri, visita il tab personalizzazione.