Home>Guide>Aggiungere il supporto swipe al carousel di Bootstrap

Aggiungere il supporto swipe al carousel di Bootstrap


Aggiungere il supporto swipe al carousel di Bootstrap


Non hai mai avuto la sensazione che l’utilissimo carousel di Bootstrap avesse qualcosa che manca? Una delle feature che sicuramente potrebbe fare comodo e dare un plus al tuo sito web è il supporto alle touch gestures, tipiche dei dispositivi dotati di schermo touch.
Forse non ci avrai badato, ma è proprio così! Il carousel di Bootstrap non le supporta.

  • Leggi l'articolo, ti bastano solo 2 minuti, 0 secondi
    Sei di fretta? Scarica il PDF e consultalo quando vuoi!

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.




Ti è piaciuto questo articolo? Regalami un click per ripagarmi dello sforzo



Code4Life ti è stato utile? Sostienici con una donazione!

Dona con PayPal

Hai trovato interessante l’articolo? Allora ti consiglio di leggere:

Come tradurre WooCommerce in italiano

Come tradurre WooCommerce in italiano


Ecco una breve guida su come tradurre WooCommerce in italiano per renderlo fruibile al 100% a tutti i tuoi clienti.

Come creare un sistema di votazione con CSS

Come creare un sistema di votazione con CSS


Impariamo ad implementare un sistema di voto, utile per blog ed e-commerce, utilizzando solo il CSS. Il risultato è tanto semplice quanto sbalorditivo!

Oppure cerca tra gli articoli correlati


E tu cosa ne pensi? Condividi la tua opinione e discutiamone insieme
La tua email non sarà resa pubblico o utilizzata per inviarti spam, te lo prometto

Iscrivimi alla newsletter per ricevere news ed aggiornamenti
Utilizziamo piattaforme di terze parti per l’invio di newsletter. (Privacy Policy)
Tienimi aggiornato su questo articolo
Ricevi una email di notifica quando qualcuno scriverà un commento a questo articolo. (Privacy Policy)
Ricorda i miei dati per la prossima volta che scriverò un commento
Il tuo nome e la tua email verranno salvati in un cookie in questo browser. (Privacy Policy)