如何使Bootstrap轮播滑块使用移动左/右滑动 [英] How to make Bootstrap carousel slider use mobile left/right swipe

问题描述

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 =http://shrani.si/f/3D/13b/1rt3lPab/2/img1.jpgalt =...> 
< / a> 
< / div> 
< div class =item> 
< a href =data-lightbox =image-1title => 
< img src =http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpgalt =...> 
< / a> < / div> 
< div class =item> 
< a href =data-lightbox =image-1title => 
< img src =http://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

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/

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>

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

http://jquerymobile.com/

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

http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/

这篇关于如何使Bootstrap轮播滑块使用移动左/右滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！