How to enable mouse swipe or drag on the bootstrap carousel

The bootstrap carousel doesn’t come with the swipe by default, this feature is not so good for mobile users. You can achieve a swipe by adding a trick that will hook in the swipe feature in the bootstrap slider.

In this article, we will cover both the HTML website and the WordPress website which are built using the Bootstrap framework.

There are many ways to enable swipe on the BS carousel. One of the best options is to use the TouchSwipe.Js library. This library is perfectly compatible with jQuery and works great with Bootstrap.

What is TouchSwipe.Js?

A jQuery plugin to be used on touch devices such as iPad, iPhone, Android etc. Detects single and multiple finger swipes, pinches and falls back to mouse ‘drags’ on the desktop.

– TouchSwipe

How to use TouchSwipe.Js

The TouchSwipe.Js comes with an npm package and as well as a CDN link.

1. NPM Package

Open the terminal and execute the following command:

npm install jquery-touchswipe --save

or

bower install jquery-touchswipe --save

2. CDN Installation

The library is available as a CDN link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

HTML Site Example: solution for bootstrap template

To enable swipe or mouse drag on the carousel, we have to enable the left and right directions events.

Use the following code:

<!-- include TouchSwipe.Js -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js'></script>

<!-- swipe start -->
<script type="text/javascript">
	// carousel is the default bootstrap carousel class
    $(".carousel").swipe({
        swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
            if (direction == 'left') $(this).carousel('next');
            if (direction == 'right') $(this).carousel('prev');
        },
        allowPageScroll: "vertical" 
    });
</script>
<!-- swipe end -->

WordPress Site Example: solution for bootstrap template

If you use a custom coded bootstrap based theme for your WordPress website, and you are using bootstrap carousel then you can enable the swipe by using the following code in the footer.php file:

<!-- include TouchSwipe.Js -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js'></script>

<!-- swipe start -->
<script type="text/javascript">
    jQuery(".carousel").swipe({
        swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
            if (direction == 'left') jQuery(this).carousel('next');
            if (direction == 'right') jQuery(this).carousel('prev');
        },
        allowPageScroll: "vertical" 
    });
</script>
<!-- swipe end -->

Note that the difference is with the $ sign with jQuery, rest of the code is same.

Note

You must add the CDN for TouchSwipe.Js after initializing jQueryJS and BootstrapJS.

The sequence of libraries is:

1. jQuery JS
2. Bootstrap JS
3. TouchSwipe JS

Why use TouchSwipe.JS

The following features have been taken from the author’s site:

• Detects swipes in 4 directions, “up”, “down”, “left” and “right”
• Detects pinches “in” and “out”
• Supports single-finger or double-finger touch events
• Supports click events both on the touch-swipe object and its child objects
• Definable threshold / maxTimeThreshold to determine when a gesture is actually a swipe
• Events triggered for swipe “start”,”move”,”end” and “cancel”
• The end event can be triggered either on touch release, or as soon as threshold is met
• Allows swiping and page scrolling
• Disables user input elements (Button, form, text etc.) from triggering swipes