如何使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> 我想要做的只是为移动设备添加左/右触摸刷卡function。 我怎样才能做到这一点？
另外，如何使hover时出现的上一个/下一个button更小，移动/ ipad版本更小？
谢谢
更新：
当我对网页devise非常陌生的时候，我提出了这个解决scheme，现在我年纪大了，明智的答案马克·希拉尔迪似乎是一个更好的select，看到下一个最佳答案。 这是一个更高效的解决scheme。
我最近在一个项目上工作，这个例子完美的工作，我给你下面的链接..
首先你必须添加jQuery的手机
这个添加的触摸function，然后你只需要进行滑动等事件
<script> $(document).ready(function() { $("#myCarousel").swiperight(function() { $(this).carousel('prev'); }); $("#myCarousel").swipeleft(function() { $(this).carousel('next'); }); }); </script>
链接在下面，你可以find我使用的教程
http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
我需要将这个function添加到我最近正在开发的一个项目中，并且为了解决这个问题而添加jQuery Mobile似乎是过度的，所以我提出了一个解决scheme，并将它放在github上： bcSwipe（Bootstrap Carousel Swipe） 。
这是一个轻量级的jQuery插件（大约600字节，相比8kb的jQuery Mobile触摸事件），并且已经在Android和iOS上进行了testing。
这是你如何使用它：
$('.carousel').bcSwipe({ threshold: 50 });
我晚了一点，但这里有一些我一直在使用的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手机或任何其他插件。 如果需要调整滑动的灵敏度，请调整5和-5 。 希望这有助于某人。
看到这个解决scheme：Bootstrap TouchCarousel。 Twitter Bootstrap的Carousel（v3）的完美function可以在触控设备上启用手势。 http://ixisio.github.io/bootstrap-touch-carousel/
检查的解决scheme不准确，有时鼠标右键单击触发器右击。 尝试不同的插件刷卡后，我发现了一个几乎完美的。
touchSwipe
我说“差不多”，因为这个插件不支持未来的元素。 所以当滑动内容被ajax或其他东西改变时，我们将不得不重新初始化滑动调用。 这个插件有很多选项来玩触摸事件，如多指触摸，捏等
h ttp：//labs.rampinteractive.co.uk/touchSwipe/demos/index.html
解决scheme1：
$("#myCarousel").swipe( { swipe:function(event, direction, distance, duration, fingerCount, fingerData) { if(direction=='left'){ $(this).carousel('next'); }else if(direction=='right'){ $(this).carousel('prev'); } } });
解决scheme2 :(对于未来的元素情况）
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");
如果你不想像我一样使用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'); }); });
