<

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

Primo titolo

Secondo titolo

Terzo titolo

Primo paragrafo

Secondo paragrafo

Terzo paragrafo

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

Primo titolo

Secondo titolo

Terzo titolo

Primo paragrafo

Secondo paragrafo

Terzo paragrafo