我从https://codepen.io/andrearufo/pen/rVWpyE

复制了代码

HTML：

    <div id="carousel-example-generic" class="carousel slide" 
    data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic"data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>

   <!-- Wrapper for slides -->
   <div class="carousel-inner" role="listbox">
   <div class="item active">
       <img src="a1.jpg">
   </div>

   <div class="item">
       <img src="a2.jpg">
   </div>
</div>

   <!-- Left and right controls -->
   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">  </span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
  </a>
 </div>

的javascript：

    <script type="text/javascript">
      $(".carousel").swipe({

     swipe: function(event, direction, distance, duration, fingerCount,   fingerData) {

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

        },
     allowPageScroll:"vertical"

       });
   </script>

Answer 1

我在手机上测试了这段代码，滑动效果确实有效。（Windows Phone 8.1，Lumia 620）

我认为您的问题是，您希望鼠标与代码进行交互的方式与触摸屏幕的方式相同，而且通常不会。

如果您想要一个使用鼠标滑动功能的滑块，那么您可以使用http://kenwheeler.github.io/slick/。

引导幻灯片抓住

我从https://codepen.io/andrearufo/pen/rVWpyE

1 个答案: