Have you ever wanted to add touch swipe and gestures to your Bootstrap Carousel? It’s quite simple to do really…
So first things first, you will need to add the TouchSwipe jQuery Plugin to your website. This plugin will detect single and multiple finger swipes, pinches and falls back to mouse ‘drags’ on the desktop. It offers a lot more features which you can read about here.
Once you have added this, you can add the Bootstrap Carousel as follows:-
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-item active">
<img class="first-slide" src="http://via.placeholder.com/960x500" alt="First slide">
<div class="container">
<div class="carousel-caption text-left">
<h1>Example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="second-slide" src="http://via.placeholder.com/960x500" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<a href="https://codepen.io" target="_blank" rel="noopener noreferrer"><img class="third-slide" src="http://via.placeholder.com/960x500" alt="Third slide"></a>
</div>
</div>
</div>
Now to implement the swipe gestures with the Bootstrap Carousel, you will need to add the below code:-
$( document ).ready(function() {
// Carousel
$(".carousel").carousel({
interval: false,
pause: true
});
$( ".carousel .carousel-inner" ).swipe( {
swipeLeft: function ( event, direction, distance, duration, fingerCount ) {
this.parent( ).carousel( 'next' );
},
swipeRight: function ( ) {
this.parent( ).carousel( 'prev' );
},
threshold: 0,
tap: function(event, target) {
window.location = $(this).find('.carousel-item.active a').attr('href');
},
excludedElements:"label, button, input, select, textarea, .noSwipe"
} );
$('.carousel .carousel-inner').on('dragstart', 'a', function () {
return false;
});
});
And that’s it, pretty simple, right?
Hi, could you share the bootstrap classes you are using? And in the order you call them. I’m having troubles with the order I import them.
Hi Bri,
Do you mean the ordering in which the CSS and JS files are called?
Yes, exactly!
I believe Bootstrap 4 and above has an option that provides a similar function :
data-touch=”true”
Any clue on how they’d compare?
Hi there,
I believe
data-touch="true"
became a thing in some of the latest updates to Bootstrap 4. I think it came out around the Bootstrap 4.3 update.In my experience, with the
data-touch
method, one has to “activate” the arrows, i.e, touching the arrow indicates to the browser that the arrow is active and then the swipe gestures work. I just found TouchSwipe jQuery Plugin to work better than the standard Bootstrap way of doing things.How to make it work in mobile devices?