On touch-enabled devices, the ability to swipe through a carousel offers a significant usability benefit. In this exercise, we will add swipe interaction to the Bootstrap carousel.
Currently, there is no foolproof way to test for touch across devices. A best practice under present circumstances is to add touch events when there is a usability gain and when we can do it without conflicting with our standard mouse events. In our case, we can easily enable swipe events on our home page carousel with a JavaScript plugin and a few lines of code.
Justin Lazanowski has posted a nice write-up of three easy options for implementing swipe interaction for the Bootstrap 3 carousel. Read his post at http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/.
We'll go with the TouchSwipe jQuery plugin hosted on GitHub at https://github.com/mattbryson/TouchSwipe-Jquery-Plugin.
By this route, we can add swipe interaction to our carousel with the following two steps:
- Fold the TouchSwipe plugin into our
pluginsfile. - Add a few lines to our
main.jsfile.
It's that simple. Let's do it.