代码之家 › 专栏 › 技术社区 › TheAmazingKnight

bx滑块左右滑动手势支持

swipe-gesture bxslider jquery javascript

2

TheAmazingKnight · 技术社区 · 9 年前

我正在尝试弄清楚如何在bx滑块插件中进行向左滑动和向右滑动手势。我问的原因是因为我有一个bx滑块,可以将图像滑块与字幕滑块同步。在最后一张到第一张幻灯片上,当我在图片上向左滑动时,字幕的方向相反,从右边滑进去,这是我不想看到的。我正在为bx滑块寻找一个简单但不太复杂的解决方案,以检测向左滑动并进行之前的幻灯片转换。

我已经研究过这个特性和锯锤。js、touchswipe和jquery mobile的swipeleft功能(想使用这个功能,但只用于jquery移动库,而不是jquery本身),但我真的不想使用一个库来实现简单的swipe功能,而且Javascript中有太多的代码无法从头开始。

我从未真正深入到bx滑块的代码中,但是否可以添加或检测滑动手势,因此当我在图像上向左滑动时,bx滑块将 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);
}

1 回复 | 直到 9 年前

1

zer00ne 9 年前

这个版本我转了180度。OP希望的行为是非常正常的行为。快速故障:

远离的 #slider-text
已删除上的所有回调 .bxslider
添加了的幻灯片 #滑块文本 到 .bx滑块
添加了额外和调整的触摸选项
删除了包裹在图像周围的链接(可能会干扰刷卡)。

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

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