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

问题描述

演示 JSSFIDDLE

 
<!--轮播--><div id="sidebar-carousel-1" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators 灰色"><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 class="item"><a href="" data-lightbox="image-1" title=""><img src="http://shrani.si/f/S/jE/UcTuhZ6/1/img2.jpg" alt="..."></a>

<div class="item"><a href="" data-lightbox="image-1" title=""><img src="http://shrani.si/f/h/To/1yjUEZbP/img3.jpg" alt="..."></a>

<!-- 控件--><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>

我想做的是仅为移动设备添加左/右触摸滑动功能.我该怎么做?

另外，我如何制作出现在悬停时的上一个/下一个按钮，对于移动/ipad 版本更小?

谢谢

解决方案

更新:

当我对网页设计还很陌生时，我想出了这个解决方案.现在我年纪大了，也更聪明了，利亚姆给出的答案似乎是一个更好的选择.请参阅下一个最佳答案；这是一个更高效的解决方案.

我最近参与了一个项目，这个例子运行良好.我给你下面的链接.

首先你必须添加jQuery mobile:

http://jquerymobile.com/

这增加了触摸功能，然后你只需要制作诸如滑动之类的事件:

链接在下面，您可以在其中找到我使用的教程:

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 Liam 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 adds 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屋！