Question

我试图弄清楚如何在bx-slider插件中向左滑动并向右滑动手势。我问的原因是因为我有一个bx滑块，可以将图像滑块与标题滑块同步。发生的事情是在最后一次滑动时，当我向左滑动图像时，标题反方向并从右侧滑入，这是我不想要的。我正在为bx-slider寻找一个简单但不过分复杂的解决方案来检测向左滑动并执行上一次幻灯片转换。

我已经研究过这个功能并看到了hammer.js，touchswipe和jquery mobile的swipeleft功能（想要使用它，但只适用于jquery移动库，而不是jquery本身）但我真的不喜欢＃39;我想使用一个库来进行简单的滑动功能，并且在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
添加了额外和调整后的触摸选项
删除了缠绕图像的链接（可能会干扰滑动）。

现在从最后一张到第一张幻灯片的过渡看起来自然而流畅。

＆＃13;

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

＆＃13;

bx-slider滑动左右手势支持

1 个答案: