DEMO JSSFIDDLE
< div class =col-md-4> <! - 轮播 - > < div id =sidebar-carousel-1class =carousel slidedata-ride =carousel> < ol class =carousel-indicators grey> < li data-target =#sidebar-carousel-1data-slide-to =0class =active>< / li> < li data-target =#sidebar-carousel-1data-slide-to =1>< / li> < li data-target =#sidebar-carousel-1data-slide-to =2>< / li> < / ol> < div class =carousel-inner> < div class =item active> < a href =data-lightbox =image-1title => < img src =shrani.si/f/3D/13b/1rt3lPab/2/img1.jpgalt =...> < / a> < / div> < div class =item> < a href =data-lightbox =image-1title => < img src =shrani.si/f/S/jE/UcTuhZ6/1/img2.jpgalt =...> < / a> < / div> < div class =item> < a href =data-lightbox =image-1title => < img src =shrani.si/f/h/To/1yjUEZbP/img3.jpgalt =...> < / a> < / div> < / div> <! - 控件 - > < a class =left carousel-controlhref =#sidebar-carousel-1data-slide =prev> < span class =glyphicon glyphicon-chevron-left>< / span> < / a> < a class =right carousel-controlhref =#sidebar-carousel-1data-slide =next> < span class =glyphicon glyphicon-chevron-right>< / span> < / a> < / div><! - / Carousel - >< / div>我想要做的是仅为移动设备添加左/右触摸滑动功能。
此外,如何在mobile / ipad版本上使悬停时显示的prev / next按钮变小?
感谢
解决方案更新: $ b
我想出了这个解决方案,当我是新的网页设计,现在我年纪大了,更聪明的答案 Mark Shiraldi 给了似乎是一个更好的选择看到下一个顶部的答案。这是一个更有成效的解决方案。
我最近在一个项目工作,这个例子工作完美,我给你以下链接..
首先,您必须添加jquery mobile
jquerymobile/
此添加功能是触摸功能,然后您只需进行滑动等事件
< script> $(document).ready(function(){ $(#myCarousel)。swiperight(function(){ $(this).carousel('prev'); }); $(#myCarousel)。swipeleft(function(){ $(this).carousel('next'); }); }); < / script>链接在下面,您可以找到我使用的教程
http ://lazcreative/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
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="shrani.si/f/3D/13b/1rt3lPab/2/img1.jpg" alt="..."> </a> </div> <div class="item"> <a href="" data-lightbox="image-1" title=""> <img src="shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="..."> </a> </div> <div class="item"> <a href="" data-lightbox="image-1" title=""> <img src="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>What I want to do is to add left/right touch swipe functionality for mobile devices only. How can I do that?
Also, how do I make prev/next buttons, that appear on hover, smaller for mobile/ipad versions?
Thanks
解决方案UPDATE:
I came up with this solution when I was pretty new to web design now that I am older and wiser the answer Mark Shiraldi gave seems to be a better option see the next top answer. It is a more productive solution.
I worked on a project recently and this example worked perfectly i am giving you the link below..
First you have to add jquery mobile
jquerymobile/
this add's the touch functionality and then you just have to make events such as swipe
<script> $(document).ready(function() { $("#myCarousel").swiperight(function() { $(this).carousel('prev'); }); $("#myCarousel").swipeleft(function() { $(this).carousel('next'); }); }); </script>The Link is below where you can find the tutorial I used
lazcreative/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
更多推荐
如何使Bootstrap轮播滑块使用移动左/右滑动
发布评论