我找到了这个代码：https://codepen.io/andrearufo/pen/rVWpyE
我喜欢使用它，但由于某些原因它不会为我工作，即使我复制它而不改变任何东西。这是为什么？
我还没有忘记嵌入bootstrap和jquery。
我还尝试过其他滑动功能解决方案，但由于某些原因，它们都没有奏效。刷卡工作的唯一轮播（我在Google Chrome开发人员工具中尝试过）就在这个代码笔上。
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});<div class="container">
<div class="page-header">
<h1>Bootstrap default carousel with swipe and touch gestures</h1>
<p class="lead">How to add the swipes gesture to comand the Bootstrap carousel on mobile devices.</p>
<p>Made by <strong>Andrea Rufo</strong>, more info and tutorial on <a href="http://www.orangedropdesign.com/"> OrangeDropDesign.com</a></p>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1400/600?image=114">
</div>
<div class="item">
<img src="https://unsplash.it/1400/600?image=745">
</div>
<div class="item">
<img src="https://unsplash.it/1400/600?image=315">
</div>
<div class="item">
<img src="https://unsplash.it/1400/600?image=622">
</div>
<div class="item">
<img src="https://unsplash.it/1400/600?image=401">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
答案 0 :(得分：1)
以下是您可能会错过JQuery或Swipe LIB的示例。
$(".carousel").swipe({
swipe: function(event, direction, distance, duration, fingerCount, fingerData) {
if (direction == 'left') $(this).carousel('next');
if (direction == 'right') $(this).carousel('prev');
},
allowPageScroll:"vertical"
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1400/600?image=114">
</div>
<div class="item">
<img src="https://unsplash.it/1400/600?image=315">
</div>
<div class="item">
<img src="https://unsplash.it/1400/600?image=622">
</div>
<div class="item">
<img src="https://unsplash.it/1400/600?image=401">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
答案 1 :(得分：0)
我希望你能得到这个帮助
(function ($) {
var touchStartX = null;
$('.carousel').each(function () {
var $carousel = $(this);
$(this).on('touchstart', function (event) {
var e = event.originalEvent;
if (e.touches.length == 1) {
var touch = e.touches[0];
touchStartX = touch.pageX;
}
}).on('touchmove', function (event) {
var e = event.originalEvent;
if (touchStartX != null) {
var touchCurrentX = e.changedTouches[0].pageX;
if ((touchCurrentX - touchStartX) > 60) {
touchStartX = null;
$carousel.carousel('prev');
} else if ((touchStartX - touchCurrentX) > 60) {
touchStartX = null;
$carousel.carousel('next');
}
}
}).on('touchend', function () {
touchStartX = null;
});
});
})(jQuery);
以下是工作演示的链接 - https://jsfiddle.net/L5begcz5/