如何使Bootstrap传送带滑块使用移动的向左/向右滑动

演示JSSFIDDLE

  <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版本？

谢谢

更新：

当我刚接触Web设计时，我想到了此解决方案。既然我年纪大了些，就变得聪明了，利亚姆给出的答案似乎是一个更好的选择。参见下一个最佳答案；这是一个更有效率的解决方案。

我最近参与了一个项目，此示例运行良好。我给你下面的链接。

首先，您必须添加jQuery mobile：

http://jquerymobile.com/

这增加了触摸功能，然后您只需要进行诸如滑动的事件：

<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/

我参加聚会有点晚了，但是我一直在使用一些jQuery：

$('.carousel').on('touchstart', function(event){
    const xClick = event.originalEvent.touches[0].pageX;
    $(this).one('touchmove', function(event){
        const xMove = event.originalEvent.touches[0].pageX;
        const sensitivityInPx = 5;

        if( Math.floor(xClick - xMove) > sensitivityInPx ){
            $(this).carousel('next');
        }
        else if( Math.floor(xClick - xMove) < -sensitivityInPx ){
            $(this).carousel('prev');
        }
    });
    $(this).on('touchend', function(){
        $(this).off('touchmove');
    });
});

无需jQuery mobile或任何其他插件。如果需要调整滑动的灵敏度，请调整5和-5。希望这对某人有帮助。

我需要将此功能添加到我最近正在研究的项目中，并添加jQuery Mobile只是为了解决此问题，这似乎有点过头了，所以我想出了一个解决方案，并将其放在github：bcSwipe（Bootstrap Carousel Swipe）上。

这是一个轻量级的jQuery插件（与8个kb的jQuery Mobile触摸事件相比，最小化了约600字节），并且已经在Android和iOS上进行了测试。

这是您的用法：

$('.carousel').bcSwipe({ threshold: 50 });

查看此解决方案：Bootstrap TouchCarousel。Twitter Bootstrap的Carousel（v3）的一种完美实现，可在触摸设备上启用手势。 http://ixisio.github.io/bootstrap-touch-carousel/

如果您不想像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');
  });
});

使用bootstrap 4.2现在非常容易，您只需要在carousel 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">

经检查的解决方案不准确，有时鼠标右键单击会触发向右滑动。在尝试了不同的插件刷卡后，我发现了一个几乎完美的插件。

轻扫

我说“差不多”是因为此插件不支持将来的元素。因此，当ajax或其他内容更改了滑动内容时，我们将不得不重新初始化滑动调用。这个插件有很多选项可以与触摸事件一起玩，例如多指触摸，捏等。

h ttp：//labs.rampinteractive.co.uk/touchSwipe/demos/index.html

解决方案1：

$("#myCarousel").swipe( {
            swipe:function(event, direction, distance, duration, fingerCount, fingerData) {

                if(direction=='left'){
                    $(this).carousel('next');
                }else if(direction=='right'){
                    $(this).carousel('prev');
                }

            }
        });

解决方案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");

对于任何发现此问题的人，根据https://github.com/twbs/bootstrap/pull/25776大约5天前（2018年10月20日）在轮播上滑动似乎是本地的

https://deploy-preview-25776--twbs-bootstrap4.netlify.com/docs/4.1/components/carousel/

与使用笨重的jQuery移动设备相比，我更喜欢相同的功能：Carousel Swipe。我建议直接跳转到github上的源代码，然后将文件复制carousel-swipe.js到您的项目目录中。

使用swiper事件作为波纹管：

$('#carousel-example-generic').carousel({
      interval: false 
  });

如果有人在寻找这个答案的斜角版本，那么我建议创建一个指令是一个好主意。

注意：使用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>

参考