Initializing TouchSwipe

With just a few lines, we can direct TouchSwipe to detect swipe events on the carousel and translate them into the Bootstrap methods: .carousel('prev') and .carousel('next'). See these methods referenced in the Bootstrap documentation at http://getbootstrap.com/javascript/#carousel.

If you'd like to, you may also consult the TouchSwipe documentation at http://labs.rampinteractive.co.uk/touchSwipe.

Our present task is very straightforward, as shown in the following steps:

1. In your project files, open main.js in the js folder

2. Add the following lines of code in the opened file:

   //Enable swiping...
   $(".carousel-inner").swipe( {
     //Generic swipe handler for all directions
     swipeRight:function(event, direction, distance, duration, fingerCount) {
       $(this).parent().carousel('prev');
     },
     swipeLeft: function() {
       $(this).parent().carousel('next');
     },
     //Default is 75px, set to 0 so any distance triggers swipe
     threshold:0
   });

3. Save the file.

Now, if you test these files on a touch device, you should be able to swipe left to go to the next slide and right to go to the previous one.

That's it. It's a small cost with a clear usability gain.

Congratulations! Your Bootstrap carousel is now swipe enabled.