Applicare l’evento touch al carousel di Twitter Bootstrap

No, non cliccare sul carousel che vedi qui sopra. E’ solo un’immagine 😀

Se, in un sito responsive, abbiamo utilizzato il carousel di Twitter Bootstrap, nella versione mobile, è il caso di applicargli l’evento touch, la gesture corretta per la migliore esperienza utente sui device mobili.

Per farlo possiamo utilizzare un plugin di jQuery che trovi qui: https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Per attivare il plugin puoi copiare il seguente codice da richiamare via jQuery ready:

$(".carousel-inner").swipe({

    swipeLeft:function(event, direction, distance, duration, fingerCount) {
        $(this).parent().carousel('prev'); 
    },
    swipeRight: function() {
        $(this).parent().carousel('next'); 
    },
    threshold:0

});