DEMO JSSFIDDLE
-
UPDATE:
I came up with this solution when I was pretty new to web design. Now that I am older and wiser, the answer Liam gave seems to be a better option. See the next top answer; it is a more productive solution.
I worked on a project recently and this example worked perfectly. I am giving you the link below.
First you have to add jQuery mobile:
http://jquerymobile.com/
This adds the touch functionality, and then you just have to make events such as swipe:
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
The link is below, where you can find the tutorial I used:
http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
讨论(0)
-
For anyone finding this, swipe on carousel appears to be native as of about 5 days ago (20 Oct 2018) as per
https://github.com/twbs/bootstrap/pull/25776
https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/
讨论(0)
-
I'm a bit late to the party, but here's a bit of jQuery I've been using:
$(".carousel").on("touchstart", function(event){
var xClick = event.originalEvent.touches[0].pageX;
$(this).one("touchmove", function(event){
var xMove = event.originalEvent.touches[0].pageX;
if( Math.floor(xClick - xMove) > 5 ){
$(this).carousel('next');
}
else if( Math.floor(xClick - xMove) < -5 ){
$(this).carousel('prev');
}
});
$(".carousel").on("touchend", function(){
$(this).off("touchmove");
});
});
No need for jQuery mobile or any other plugins. If you need to adjust the sensitivity of the swipe adjust the 5
and -5
. Hope this helps someone.
讨论(0)
-
Checked solution is not accurate, sometimes mouse-right-click triggers right-swipe.
after trying different plugins for swipe i found an almost perfect one.
touchSwipe
i said "almost" because this plugin does not support future elements. so we would have to reinitialize the swipe call when the swipe content is changed by ajax or something. this plugin have lots of options to play with touch events like multi-finger-touch,pinch etc.
http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html
solution 1 :
$("#myCarousel").swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}
}
});
solution 2:(for future element case)
function addSwipeTo(selector){
$(selector).swipe("destroy");
$(selector).swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}
}
});
}
addSwipeTo("#myCarousel");
讨论(0)
-
Same functionality I prefer than using much heavy jQuery mobile is Carousel Swipe. I suggest directly jump in to source code on github, and copy file carousel-swipe.js
in to your project directory.
Use swiper events as bellow:
$('#carousel-example-generic').carousel({
interval: false
});
讨论(0)
-
I needed to add this functionality to a project I was working on recently and adding jQuery Mobile just to solve this problem seemed like overkill, so I came up with a solution and put it on github: bcSwipe (Bootstrap Carousel Swipe).
It's a lightweight jQuery plugin (~600 bytes minified vs jQuery Mobile touch events at 8kb), and it's been tested on Android and iOS.
This is how you use it:
$('.carousel').bcSwipe({ threshold: 50 });
讨论(0)