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