bx-slider左右滑动手势支持

Question

我正在尝试了解如何在 bx-slider 插件中执行向左滑动和向右滑动的手势。我问的原因是因为我有一个 bx-slider 可以将图像滑块与字幕滑块同步。从最后一张到第一张幻灯片会发生什么，当我在图像上向左滑动时，标题反向并从右侧滑入，这是我不想要的。我正在为 bx-slider 寻找一个简单但不过分复杂的解决方案来检测向左滑动并执行上一个幻灯片过渡。

我研究过此功能并看到 hammer.js、touchswipe 和 jquery 移动设备的 swipeleft 功能（想使用此功能，但仅适用于 jquery 移动图书馆，而不是 jquery 本身），但我真的不想使用库来实现简单的滑动功能，而且 Javascript 中有太多代码无法从头开始完成。

我从未真正深入研究过 bx-slider 的代码，但是否可以添加或检测滑动手势，所以当我在图像上向左滑动时，bx-slider 将 goToPrevSlide()因为默认情况下向右滑动在移动设备上完美运行？

这是我的图像滑块和标题滑块代码：

// 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);
}

Answer 1

这个版本我来了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>

bx-slider左右滑动手势支持

bx-slider swipe left and right gesture support

javascript

jquery

swipe-gesture

bxslider