<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>
我想要做的是仅为移动设备添加左/右触摸功能。我怎么能这样做？
此外，如何为移动/ ipad版本制作小型显示的上一个/下一个按钮？
由于
答案 0 :(得分：90)
我需要将这个功能添加到我最近正在处理的项目中，并且添加jQuery Mobile只是为了解决这个问题似乎有些过分，所以我想出了一个解决方案并将其放在github上：bcSwipe (Bootstrap Carousel Swipe)。< / p>
它是一个轻量级的jQuery插件（与8kb的jQuery Mobile触摸事件相比缩小了大约600字节），并且已经在Android和iOS上进行了测试。
这是您使用它的方式：
$('.carousel').bcSwipe({ threshold: 50 });
答案 1 :(得分：87)
<强>更新
当我对网页设计不熟悉时，我想出了这个解决方案。现在我已经老了，更聪明了，Mark Shiraldi给出的回答似乎是一个更好的选择。看下一个最佳答案;这是一个更有效的解决方案。
我最近参与了一个项目，这个例子运作得很好。我给你以下链接。
首先你需要添加jQuery mobile：
这会添加触控功能，然后您只需要进行滑动等事件：
<script>
$(document).ready(function() {
$("#myCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
链接如下，您可以在其中找到我使用的教程：
http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
答案 2 :(得分：82)
我参加派对有点晚了，但这里有一些我一直在使用的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");
});
});
不需要jQuery mobile或任何其他插件。如果您需要调整滑动的灵敏度，请调整5和-5。希望这有助于某人。
答案 3 :(得分：4)
查看此解决方案： Bootstrap TouchCarousel。 Twitter Bootstrap的Carousel（v3）的完美功能，可在触控设备上启用手势。 http://ixisio.github.io/bootstrap-touch-carousel/
答案 4 :(得分：3)
如果您不想像我一样使用jQuery mobile。您可以使用Hammer.js
它主要是jQuery Mobile，没有不必要的代码。
$(document).ready(function() {
Hammer(myCarousel).on("swipeleft", function(){
$(this).carousel('next');
});
Hammer(myCarousel).on("swiperight", function(){
$(this).carousel('prev');
});
});
答案 5 :(得分：2)
已检查的解决方案不准确，有时鼠标右键单击会触发右键滑动。 尝试不同的插件后，我发现了一个近乎完美的插件。
我说＆＃34;几乎＆＃34;因为这个插件不支持将来的元素。因此，当通过ajax或其他内容更改滑动内容时，我们必须重新初始化滑动调用。这个插件有很多选项可以玩触摸事件，如多指触摸，捏等。ħttp://labs.rampinteractive.co.uk/touchSwipe/demos/index.html
$("#myCarousel").swipe( {
swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
if(direction=='left'){
$(this).carousel('next');
}else if(direction=='right'){
$(this).carousel('prev');
}
}
});
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");
答案 6 :(得分：1)
对于发现此问题的任何人，按照约5天前（2018年10月20日）的习惯，在轮播上滑动似乎是本地的 https://github.com/twbs/bootstrap/pull/25776
https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/
答案 7 :(得分：1)
使用bootstrap 4.2现在非常容易，您只需将轮播div中的touch选项作为data-touch="true"传递，因为它仅接受布尔值。
根据您的情况，将引导程序更新到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>
，然后在您的引导轮播div中添加touch选项
<div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel" data-touch="true">
答案 8 :(得分：0)
我喜欢使用相同功能而不是使用大量jQuery mobile Carousel Swipe.我建议直接跳转到github上的源代码，并将文件carousel-swipe.js复制到项目目录中。
使用swiper事件如下：
$('#carousel-example-generic').carousel({
interval: false
});
答案 9 :(得分：0)
如果有人在寻找这个答案的斜体，那么我建议创建一个指令是一个好主意。
注意：使用ngx-bootstrap。
import { Directive, Host, Self, Optional, Input, Renderer2, OnInit, ElementRef } from '@angular/core';
import { CarouselComponent } from 'ngx-bootstrap/carousel';
@Directive({
selector: '[appCarouselSwipe]'
})
export class AppCarouselSwipeDirective implements OnInit {
@Input() swipeThreshold = 50;
private start: number;
private stillMoving: boolean;
private moveListener: Function;
constructor(
@Host() @Self() @Optional() private carousel: CarouselComponent,
private renderer: Renderer2,
private element: ElementRef
) {
}
ngOnInit(): void {
if ('ontouchstart' in document.documentElement) {
this.renderer.listen(this.element.nativeElement, 'touchstart', this.onTouchStart.bind(this));
this.renderer.listen(this.element.nativeElement, 'touchend', this.onTouchEnd.bind(this));
}
}
private onTouchStart(e: TouchEvent): void {
if (e.touches.length === 1) {
this.start = e.touches[0].pageX;
this.stillMoving = true;
this.moveListener = this.renderer.listen(this.element.nativeElement, 'touchmove', this.onTouchMove.bind(this));
}
}
private onTouchMove(e: TouchEvent): void {
if (this.stillMoving) {
const x = e.touches[0].pageX;
const difference = this.start - x;
if (Math.abs(difference) >= this.swipeThreshold) {
this.cancelTouch();
if (difference > 0) {
if (this.carousel.activeSlide < this.carousel.slides.length - 1) {
this.carousel.activeSlide = this.carousel.activeSlide + 1;
}
} else {
if (this.carousel.activeSlide > 0) {
this.carousel.activeSlide = this.carousel.activeSlide - 1;
}
}
}
}
}
private onTouchEnd(e: TouchEvent): void {
this.cancelTouch();
}
private cancelTouch() {
if (this.moveListener) {
this.moveListener();
this.moveListener = undefined;
}
this.start = null;
this.stillMoving = false;
}
}
在html中：
<carousel appCarouselSwipe>
...
</carousel>