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

本文介绍了如何使Bootstrap轮播滑块使用移动左/右滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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/