jquery – 如何使Bootstrap轮播滑块使用移动左/右滑动

前端之家收集整理的这篇文章主要介绍了jquery – 如何使Bootstrap轮播滑块使用移动左/右滑动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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>

我想要做的是仅为移动设备添加左/右触摸滑动功能。我怎样才能做到这一点?

此外,如何使prev / next按钮,出现在悬停,更小的手机/ ipad版本?

谢谢

解决方法

更新:

我想出了这个解决方案,当我刚刚新的网页设计,现在我更老,更聪明的答案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/

猜你在找的jQuery相关文章