¿Cómo agregar swipe al carrusel de Bootstrap 3?

Hace no mucho me encontré en un proyecto que se estaba realizando con Bootstrap. Al final del mismo, el cliente nos pidió que los slides o carruseles de imágenes tuvieran la posibilidad de cambiar mediante “swipe” al verse en un dispositivo móvil. Nunca había integrado esta funcionalidad con el carrusel de Bootstrap y este último no tiene dicha funcionalidad nativamente, pero la respuesta fue más fácil de lo que esperaba. Así que aquí les dejo una guía corta pero práctica de cómo agregar swipe al carrusel de Bootstrap.

Lo primero que hay que hacer es ir a jQuery Mobile y descargar la última versión. O bien, puedes compilar tu propia versión de jQuery Mobile aquí, permitiendo integrar sólo las funcionalidades que necesitas (en este caso, del touch) para tener un archivo más pequeño.

Lo siguiente, es incluirlo en tu archivo HTML como cualquier otro archivo de Javascript:

<script src=”jquery.mobile.custom.min.js”></script>

Por último, al iniciar tu documento,  debes integrar el evento swiperight y swipeleft el prev y next del Bootstrap Carrusel respectivamente:

$(document).ready(function() {
   $("#myCarousel").swiperight(function() {
      $(this).carousel('prev');
   });
   $("#myCarousel").swipeleft(function() {
      $(this).carousel('next');
   });
});

Y eso es todo, ahora puedes probar tu carrusel en el simulador de móvil de las herramientas de Google Chrome o directamente en tu dispositivo móvil.