<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>
我想做的是只为移动设备添加左/右触摸滑动功能。我该怎么做?
此外,对于移动设备/iPad 版本,如何使悬停时出现的上一个/下一个按钮变小?
谢谢
最佳答案
我来晚了一点,但这是我一直在使用的一些 jQuery:
$('.carousel').on('touchstart', function(event){
const xClick = event.originalEvent.touches[0].pageX;
$(this).one('touchmove', function(event){
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if( Math.floor(xClick - xMove) > sensitivityInPx ){
$(this).carousel('next');
}
else if( Math.floor(xClick - xMove) < -sensitivityInPx ){
$(this).carousel('prev');
}
});
$(this).on('touchend', function(){
$(this).off('touchmove');
});
});
无需 jQuery Mobile 或任何其他插件。如果您需要调整滑动的灵敏度,请调整 5
和 -5
。希望这对某人有帮助。
关于jquery - 如何使 Bootstrap 轮播 slider 使用移动左/右滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21349984/