Aggiungere il supporto swipe al carousel di Bootstrap

Il carousel di Bootstrap

Il componente Carousel di Bootstrap è uno slideshow per la presentazione ciclica di una serie di immagini, costruito con le direttive transform 3D di CSS e l’ausilio di JavaScript che ne permettono lo scorrimento.

Touch gestures

Non sono altro che le azioni che si innescano con le dita sugli schermi touch, come quelli che possiedono smartphone e tablet. In particolare, andiamo ad aggiungere il supporto allo Swipe, azione che effettuiamo migliaia di volte al giorno con i nostri smartphone e vale a dire il movimento di “trascinamento”, utilizzato, ad esempio, per sbloccare lo schermo o cambiare pagina.
La versione corrente di jQuery (v3.2.1) attualmente non supporta nitidamente questo tipo di azioni, ma scopriamo come farlo con l’ausilio di un piccolo plugin.

jQuery TouchSwipe plugin

La prima cosa da fare, è procurarsi il plugin in questione, che puoi scaricare da qui:

 
Scompatta l’archivio .zip appena scaricato, dopodiché, includi il file jquery.touchSwipe.min.js (o la sua versione di sviluppo jquery.touchSwipe.js) nel tuo progetto, come un qualsiasi altro file .js e naturalmente ricorda di inserirlo dopo la chiamata alla libreria jQuery ed ai files necessari per utilizzare il framework Bootstrap:

<script type="text/javascript" src="{percorso_dei_files_js}/jquery.min.js"></script>
<script type="text/javascript" src="{percorso_dei_files_js}/tether.min.js"></script>
<script type="text/javascript" src="{percorso_dei_files_js}/bootstrap.min.js"></script>
<script type="text/javascript" src="{percorso_dei_files_js}/jquery.touchSwipe.min.js"></script>

Se ancora non hai incluso il framework Bootstrap, ecco dove trovare l’ultima versione:

Abilita lo swiping

Fatto? Bene, ora non ci resta che “intercettare” le azioni di swiping e fare un trigger sulle azioni di slide del carousel di Bootstrap. Per farlo, aggiungi questa funzione nel tuo progetto:

<script type="text/javascript">
	jQuery( function( $ ) {
		$( '.carousel-inner' ).swipe( {
			swipeLeft: function( e, direction, distance, duration, count ) {
				$( this ).parent().carousel( 'prev' );
			},
			swipeRight: function( e, direction, distance, duration, count ) {
				$( this ).parent().carousel( 'next' );
			},
      			threshold: 0
		} );
	} );
</script>

Cos’abbiamo fatto? Nulla di particolare: utilizzando le funzioni di jQuery TouchSwipe, ad ogni azione di swipe lo script “invocherà”, a seconda della direzione dello swipe, le funzioni ‘next’ e ‘prev’ del carousel di Bootstrap.