我正在尝试弄清楚如何在 bx-slider 插件中执行向左滑动和向右滑动的手势。我问的原因是因为我有一个 bx-slider 可以将图像 slider 与字幕 slider 同步。从最后一张到第一张幻灯片会发生什么，当我在图像上向左滑动时，标题反向并从右侧滑入，这是我不想要的。我正在为 bx-slider 寻找一个简单但不过于复杂的解决方案来检测向左滑动并执行上一个幻灯片过渡。
我研究过这个功能并看到了 hammer.js、touchswipe 和 jquery mobile 的 swipeleft 功能(想使用这个，但只针对 jquery mobile 库，而不是 jquery 本身)但我真的不想使用用于简单滑动功能的库，并且有太多代码无法在 Javascript 中从头开始完成。
我从来没有真正研究过 bx-slider 的代码，但是是否可以添加或检测滑动手势，所以当我在图像上向左滑动时，bx-slider 将 goToPrevSlide() 作为滑动默认情况下正确在移动设备上完美运行？
这是我的图像 slider 和字幕 slider 代码:
// for image slider
var bx = $('#hero .bxslider').bxSlider({
auto: true,
infiniteLoop: true,
pager: false,
controls: true,
pause: 5000,
onSlideBefore: syncTextSlider,
});
// for caption slider
var cx = $("#slider-text").bxSlider({
infiniteLoop: true,
pager: false,
controls: false,
preventDefaultSwipeX: true, // prevent swiping x-axis on mobile
preventDefaultSwipeY: false, // prevent swiping y-axis on mobile
touchEnabled: false, // prevent touch transitions on the bxslider; make 'true' if implementing slider controls
});
// function to sync bx slider with cx slider
function syncTextSlider($ele, from, to) {
cx.goToNextSlide(to);
}
最佳答案
这个版本我来了 180 度。 OP 期望的行为几乎是正常行为。快速分割:
- 删除了
#slider-text - 删除了
.bxslider上的所有回调 - 将
#slider-text的幻灯片添加到.bxslider - 添加了额外的和调整后的触摸选项
- 删除了包裹在图片周围的链接(可能会干扰滑动)。
现在从最后一张幻灯片到第一张幻灯片的过渡看起来自然流畅。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35486338</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<style>
/* Remove style to relocate controls to original position */
.bx-controls-direction a {
top: 55% !important;
}
</style>
</head>
<body>
<!--image slider desktop-->
<div id="hero">
<ul class="bxslider">
<li>
<img src="http://placehold.it/350x150/000/0ff/?text=1" class="slider-img-responsive">
<nav>
<h1>Title 1</h1>
<h2>Byline 1</h2>
<a href="www.google.com">Button 1</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/fff/?text=2" class="slider-img-responsive">
<nav>
<h1>Title 2</h1>
<h2>Byline 2</h2>
<a href="www.google.com">Button 2</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/e00/?text=3" class="slider-img-responsive">
<nav>
<h1>Title 3</h1>
<h2>Byline 3</h2>
<a href="www.google.com">Button 3</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/f3f/?text=4" class="slider-img-responsive">
<nav>
<h1>Title 4</h1>
<h2>Byline 4</h2>
<a href="www.google.com">Button 4</a>
</nav>
</li>
<li>
<img src="http://placehold.it/350x150/000/3f3/?text=5" class="slider-img-responsive">
</a>
<nav>
<h1>Title 5</h1>
<h2>Byline 5</h2>
<a href="www.google.com">Button 5</a>
</nav>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<script>
var bx = $('.bxslider').bxSlider({
auto: true,
infiniteLoop: true,
pager: false,
controls: true,
pause: 5000,
preventDefaultSwipeX: false,
preventDefaultSwipeY: true,
touchEnabled: true,
swipeThreshold: 20
});
</script>
</body>
</html>关于javascript - bx-slider 左右滑动手势支持，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35561265/