Applicare l’evento touch al carousel di Twitter Bootstrap

Pubblicato il 27 Giugno 2016

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

});

Autore: emawebdesign

Full Stack Developer, SEO Specialist, esperto della trasformazione digitale con oltre 20 anni di esperienza.

Pubblicato in: