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.
Table of Contents
Introduction
Bootstrap itself does not provide built-in support for mouse swipe or drag functionality on the carousel. However, you can achieve this by incorporating additional libraries or custom code. 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 swiping on the Bootstrap Carousel. We have covered the following libraries in our example:
These libraries are perfectly compatible with jQuery and work great with Bootstrap.
Implementation of Bootstrap Carousel with 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 as well as a CDN link.
NPM Package
Open the terminal and execute the following command:
npm install jquery-touchswipe --save
or
bower install jquery-touchswipe --save
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 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, the rest of the code is the same.
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 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 the threshold is met
- Allows swiping and page scrolling
- Disables user input elements (Button, form, text, etc.) from triggering swipes
Implementation of Bootstrap Carousel with Hammer.Js
One popular library for adding touch and swipe support to Bootstrap Carousel is hammer.js. Here’s a step-by-step guide on how you can enable mouse swipe or drag on a Bootstrap Carousel using hammer.js:
Include the required libraries
Make sure to include the Bootstrap and Hammer.js libraries in your HTML file. You can use CDN links or download and host the files locally.
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <!-- Hammer.js --> <script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
Update your HTML structure
Ensure your HTML structure includes the necessary carousel elements. Here’s a basic example:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<!-- Your first slide content -->
</div>
<div class="carousel-item">
<!-- Your second slide content -->
</div>
<!-- Add more slides as needed -->
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Add JavaScript code
Initialize hammer.js on the carousel and set up the swipe/drag functionality.
document.addEventListener('DOMContentLoaded', function () {
var myCarousel = document.getElementById('myCarousel');
var hammer = new Hammer(myCarousel);
hammer.on('swipeleft', function () {
$('#myCarousel').carousel('next');
});
hammer.on('swiperight', function () {
$('#myCarousel').carousel('prev');
});
});
In this example, we use jQuery to trigger the carousel navigation (carousel('next') and carousel('prev')) on swipe events. Make sure to include jQuery before this script if you haven’t done so already.
Remember to replace the placeholder content in the carousel with your actual slide content. Additionally, always check for the latest versions of libraries and update your code accordingly.
Note
You must add the CDN for respective libraries after initializing jQueryJS and BootstrapJS.
The sequence of libraries is:
- jQuery JS
- Bootstrap JS
- TouchSwipe.JS or Hammer.JS
Conclusion
In conclusion, enhancing the user experience of a Bootstrap Carousel by enabling mouse swipe or drag functionality can be achieved through the integration of additional libraries. By incorporating touch and swipe support, you empower users to navigate through carousel content seamlessly, whether on traditional desktop setups or touch-enabled devices. This customization not only adds a layer of interactivity but also aligns the carousel behavior with modern user expectations.
