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:
In your project files, open
main.jsin thejsfolderAdd 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 });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.