How to enable mouse swipe or drag on bootstrap carousel

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

You have to use touchSwipe library. The CDN for touchSwipe is:

https//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js

Use the following code:

<!-- swipe start -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js'></script>
<script type="text/javascript">
    $(".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 solution

If you uses custom coded bootstrap based theme for your WordPress website and you are using Bootstrap Carousel than you can enable the swipe on it by placing the following code in the footer.php file:

<!-- swipe start -->
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js'></script>
<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.

Note

You must add the CDN for touchSwipe after initializing jQuery JS and Bootstrap JS. So the sequence will be:

1. jQuery JS
2. Bootstrap JS
3. touchSwipe JS