Slider

Nel wordpress Gpci framework il pattern slider serve a mostrare una sequenza di gruppi di elementi in ciclo, è realizzato completamente con blocchi gutenberg. Lo slider è animato dalla funzione AnimateElements (configurato interamente con attributi e inizializzato in javascript) ed è molto simile come funzionamento al pattern slideshow. Il pattern slider è realizzato in due colonne: a sinistra una galleria di immagini e a destra titolo, descrizione e pulsanti cliccabili. Il codice css come di consueto è scritto nel blocco contenitore e come lo slideshow sono presenti anche le icone avanti/indietro e un contenitore di dots (sempre automaticamente generati), cambiano leggermente le disposizioni nel markup e il codice javascript. Lo slider (appena avviato via javascript) è animato in uno di questi tre modi:

• cliccando su un'icona avanti/indietro
• cliccando su un dot
• automaticamente utilizzando l'autoforward

Come gli altri patterns non è necessario alcun id ma è tutto relativo a se stesso, quindi può essere inserito facilmente anche in una query. Vanno specificate alcune cose importanti:

• lo slider è definito interamente con attributi (quindi sarà inizializzato dalla funzione javascript AnimateElements senza attributi), per ora non ho testato l'inizializzazione esclusivamente tramite funzione javascript ma non credo funzionerebbe correttamente
• il numero di elementi per ogni gruppo come linea generale deve essere uguale, quindi ad esempio 3 immagini, 3 titoli, 3 descrizioni e 3 pulsanti. E' comunque possibile inserire numeri di elementi differenti utilizzando colonne e/o contenitori ma dovrete battezzare sempre un solo contenitore per ogni gruppo animato
• il contenitore esterno non deve essere rimosso in quanto deve essere considerato come la punta della piramide che gestirà gli altri elementi
• il markup di ogni elemento indicativamente è sempre quello e, per evitare di scrivere codice personalizzato, così dovrebbe rimanere. Quindi: un contenitore che ospita gli elementi da animare e definisce le animazioni interne
• il css scritto nel pattern è il più generale possibile quindi va adattato alle esigenze

Per aggiungere elementi non presenti nel pattern seguire semplicemente la stessa logica di contenitori (che è indicativamente la stessa del pattern slideshow). Ora vediamo qualche esempio:

Pattern slider di base

Nessun autoforward applicato (la funzione AnimateElements deve essere chiamata lo stesso!), animabile tramite icone e dots. Attributi applicati al contenitore esterno:

• data-animate-animation-container = true
• data-animate-type = groups
• data-animate-autoforward = false

Attributi applicati ai gruppi interni:

• data-animate-animation = valori vari in quanto ogni animazione è diversa
• data-animate-type = group

Pattern slider di base con autoforward

Come sopra ma con autoforward applicato (due secondi) e monitor di posizione (al 100% di visibilità), animabile anche tramite icone e dots. Attributi applicati al contenitore esterno:

• data-animate-animation-container = true
• data-animate-type = groups
• data-animate-autoforward = {"number":1,"delay":2000,"monitor":100}

Attributi applicati ai gruppi interni:

• data-animate-animation = valori vari in quanto ogni animazione è diversa
• data-animate-type = group