Avete uno slideshow ma volete che il vostro carousel di Bootstrap funzioni anche con lo swipe sugli smartphone?
L’idea che sta alla base del carosello di Bootstrap (o slideshow se preferite) è quello di utilizzare il più possibile le proprietà del CSS3 per animarlo e renderlo funzionale. Tali proprietà però, al momento, non sono sufficienti per renderlo funzionale per come lo hanno progettato e allora è stato necessario inizializzare alcune funzioni in jQuery, che ricordo essere necessario per utilizzare le componenti Javascript di Bootstrap, per utilizzarlo al meglio.
Di standard, in questa programmazione, non è previsto che tale carosello funzioni anche in mobile con le classiche azioni si swip che utilizziamo per scorrere gli elementi lateralmente.
La prima soluzione che programmai per aggiungere questa funzione è avvenuta tramite jQuery Mobile che però ha tutta un’altra serie di… “cose” di cui non avevo bisogno e che mi infastidivano.
La soluzione è stata utilizzare un plugin per jQuery che permettesse di identificare solamente le azioni di interazione touch: jQuery touchSwipe.
Il plugin in questione permette di intercettare alcune gesture su dispositivi touch e in particolare la direzione dello swipe: left o right per essere precisi. Considerando questo è possibile usare le funzioni che ci fornisce Bootstrap via JS per indicare allo slider di mostrare la scheda precedente o successiva.
Ecco il codice di esempio:
Mi pare tutto molto semplice non è vero? e ci risparmiamo molte rogne di jQuery Mobile con un codice pulito e semplice da capire e implementare.
Demo
Ecco una demo del risultato sperando che vi possa essere utile.
See the Pen Bootstrap carousel with swipe by Andrea Rufo (@andrearufo) on CodePen.
Forcate pure l’esempio, lasciate un commento all’articolo e fatemi domande se avete qualche dubbio!
Update
Il buon Federico Q., amico e stimato collega, mi fa notare che lo script intercetta lo swipe anche verticalmente, quindi impedisce lo scroll della pagina. Fortunatamente il plugin utilizzato ha previsto anche questa opzione. Modificato un po’ lo script usato si ovvia al problema. Trovate tutto nel pen già incollato sopra.
L'articolo Implementare lo swipe per il carousel standard di Bootstrap sembra essere il primo su Orange Drop Design.
