jQuery 如何使 Bootstrap 轮播滑块使用移动左/右滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21349984/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Bootstrap carousel slider use mobile left/right swipe
提问by user3187469
<div class="col-md-4">
<!--Carousel-->
<div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators grey">
<li data-target="#sidebar-carousel-1" data-slide-to="0" class="active"></li>
<li data-target="#sidebar-carousel-1" data-slide-to="1"></li>
<li data-target="#sidebar-carousel-1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="...">
</a>
</div>
<div class="item">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="...">
</a> </div>
<div class="item">
<a href="" data-lightbox="image-1" title="">
<img src="http://shrani.si/f/h/To/1yjUEZbP/img3.jpg" alt="...">
</a> </div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#sidebar-carousel-1" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#sidebar-carousel-1" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--/Carousel--></div>
What I want to do is to add left/right touch swipe functionality for mobile devices only. How can I do that?
我想要做的是仅为移动设备添加左/右触摸滑动功能。我怎样才能做到这一点？
Also, how do I make prev/next buttons, that appear on hover, smaller for mobile/ipad versions?
另外，我如何制作出现在悬停时的上一个/下一个按钮，对于移动/ipad 版本更小？
Thanks
谢谢
回答by Liam
I'm a bit late to the party, but here's a bit of jQuery I've been using:
我参加聚会有点晚了，但这里有一些我一直在使用的 jQuery：
$(".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 5and -5. Hope this helps someone.
不需要 jQuery mobile 或任何其他插件。如果您需要调整滑动的灵敏度，请调整5和-5。希望这可以帮助某人。
回答by Mark Shiraldi
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).
我需要将这个功能添加到我最近在做的一个项目中，而添加 jQuery Mobile 只是为了解决这个问题似乎有点矫枉过正，所以我想出了一个解决方案并将其放在 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.
这是一个轻量级的 jQuery 插件（约 600 字节与 8kb 的 jQuery Mobile 触摸事件相比），并且已经在 Android 和 iOS 上进行了测试。
This is how you use it:
这是你如何使用它：
$('.carousel').bcSwipe({ threshold: 50 });
回答by Abdul-Rafay Shaikh
UPDATE:
更新：
I came up with this solution when I was pretty new to web design. Now that I am older and wiser, the answer Mark Shiraldigave seems to be a better option. See the next top answer; it is a more productive solution.
当我对网页设计还很陌生时，我想出了这个解决方案。现在我长大了，更聪明了，Mark Shiraldi给出的答案似乎是一个更好的选择。请参阅下一个最佳答案；这是一个更有成效的解决方案。
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:
首先，您必须添加 jQuery mobile：
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/
http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
回答by stan1379
See this solution: Bootstrap TouchCarousel. A drop-in perfection for Twitter Bootstrap's Carousel (v3) to enable gestures on touch devices. http://ixisio.github.io/bootstrap-touch-carousel/
请参阅此解决方案：Bootstrap TouchCarousel。Twitter Bootstrap 的 Carousel (v3) 的完美选择，可以在触摸设备上启用手势。 http://ixisio.github.io/bootstrap-touch-carousel/
回答by Madan Bhandari
If you don't want to use jQuery mobileas like me. You can use Hammer.js
如果你不想像jQuery mobile我一样使用。你可以使用Hammer.js
It's mostly like jQuery Mobilewithout unnecessary code.
就像jQuery Mobile没有不必要的代码一样。
$(document).ready(function() {
Hammer(myCarousel).on("swipeleft", function(){
$(this).carousel('next');
});
Hammer(myCarousel).on("swiperight", function(){
$(this).carousel('prev');
});
});
回答by ADITYA HAZARIKA
With bootstrap 4.2 its now very easy, you just need to pass the touch option in the carousel div as data-touch="true", as it accepts Boolean value only.
使用 bootstrap 4.2 现在非常简单，您只需要在 carousel div 中将 touch 选项传递为data-touch="true"，因为它只接受布尔值。
As in your case update bootstrap to 4.2 and paste(Or download source files) the following in exact order :
在您的情况下，将引导程序更新到 4.2 并按确切顺序粘贴（或下载源文件）以下内容：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
and then add the touch option in your bootstrap carousel div
然后在 bootstrap carousel div 中添加触摸选项
<div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel" data-touch="true">
回答by geo
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://github.com/twbs/bootstrap/pull/25776，大约 5 天前（2018 年 10 月 20 日）在轮播上滑动似乎是原生的
https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/
https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/
回答by Rameez Rami
Checked solution is not accurate, sometimes mouse-right-click triggers right-swipe. after trying different plugins for swipe i found an almost perfect one.
检查的解决方案不准确，有时鼠标右键单击会触发向右滑动。在尝试了不同的刷卡插件后，我找到了一个几乎完美的插件。
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.
我说“几乎”是因为这个插件不支持未来的元素。所以当滑动内容被 ajax 或其他东西更改时，我们将不得不重新初始化滑动调用。这个插件有很多选项来处理触摸事件，比如多指触摸、捏合等。
http://labs.rampinteractive.co.uk/touchSwipe/demos/index.html
h ttp://labs.rampinteractive.co.uk/touchSwipe/demos/index.html
solution 1 :
解决方案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)
解决方案2：（对于未来的元素案例）
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");
回答by Shweta
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.jsin to your project directory.
与使用大量 jQuery mobile 相比，我更喜欢的相同功能是Carousel Swipe。我建议直接跳转到github上的源代码，并将文件复制carousel-swipe.js到您的项目目录中。
Use swiper events as bellow:
使用 swiper 事件如下：
$('#carousel-example-generic').carousel({
interval: false
});
