如何制作Bootstrap轮播滑块使用移动左/右滑动

Question

DEMO 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版本中制作出悬停时显示的上一个/下一个按钮？

谢谢

Answer 1

我需要将这个功能添加到我最近正在处理的项目中,并且添加jQuery Mobile只是为了解决这个问题似乎有些过分,所以我想出了一个解决方案并将其放在github上:bcSwipe(Bootstrap Carousel Swipe).

它是一个轻量级的jQuery插件(大约600字节缩小,与8kb的jQuery Mobile触摸事件相比),并且已经在Android和iOS上进行了测试.

这是你如何使用它:

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

Answer 2

我参加派对有点晚了,但这里有一些我一直在使用的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.希望这有助于某人.

Answer 3

更新:

当我不熟悉网页设计时,我想出了这个解决方案.现在我变得更老更聪明了,Mark Shiraldi给出的答案似乎是一个更好的选择.看下一个最佳答案; 这是一个更有效的解决方案.

我最近参与了一个项目,这个例子运作得很好.我给你以下链接.

首先你必须添加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/

Answer 4

使用 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>

然后在 bootstrap carousel div 中添加触摸选项

    <div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel" data-touch="true">