bxSlider

Question

我是运行 Bxslider (4.2.14) 的最新版本，除寻呼机外一切正常。

使用分页器在幻灯片之间切换时，停顿比应有的短得多：

重现步骤：

打开Fiddle：https://jsfiddle.net/Bruno42/smvhe3o4/7/
幻灯片 #2 出现时等待 ~3-4 秒
通过单击寻呼机切换回幻灯片 #1
暂停应该持续 5 秒（就像在 "auto" 模式期间），但它只持续 1-2 秒

我认为每次使用寻呼机选择幻灯片时，暂停倒计时应该重置为 5 秒。

我花了一段时间试图通过使用 clearInterval(slider.interval); 来解决 jquery.bxslider.js 中 clickPagerBind() 函数的解决方案，但是它没有用（滑块在之后卡住了那个）。

用于加载bxSlider的代码（也可在我的JsFiddle）：

$('.bxslider').bxSlider({
    maxSlides: 1,
    slideWidth: 800,
    pager: true,
    pagerType: 'full',
    autoHover: false,
    auto: true,
    stopAuto: false,
    stopAutoOnClick: false,
    speed: 1000,
    pause: 5000,
    mode: 'horizontal',
    controls: false,
});

非常感谢你的帮助。

Answer 1

speed: 1000 可能太快，无法完成转换以及 startAuto() 和 stopAuto() 方法无法开始或结束。为了控制在转换期间调用哪些方法，我们可以使用来自 bxSlider API 的回调。创建自定义函数并在 onSlideAfter 或 onSlideBefore 上调用它。以下演示调用 function pagerFix() onSlideAfter:

function pagerFix($bx, prv, nxt) {
  bx.stopAuto(true);
  bx.goToSlide(nxt);
  bx.stopAuto(false);
  bx.startAuto(true);
}

初始化时 .bxSlider() 确保引用它以便调用方法。

let bx = $('.bxslider').bxSlider(...

Fiddle

（使用 onSlideBefore）

演示

（使用 onSlideAfter）

let bx = $('.bxslider').bxSlider({
  slideWidth: 800,
  auto: true,
  speed: 1000,
  pause: 5000,
  controls: false,
  onSlideAfter: pagerFix
});

function pagerFix($bx, prv, nxt) {
  bx.stopAuto(true);
  bx.goToSlide(nxt);
  bx.stopAuto(false);
  bx.startAuto(true);
}

<link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css' rel='stylesheet'>

<ul class="bxslider" style="width: 800px; height: 250px;">
  <li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=1"></li>
  <li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=2"></li>
  <li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=3"></li>
  <li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=4"></li>
</ul>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js'></script>

bxSlider - 使用寻呼机时幻灯片之间的错误停顿

bxSlider - Wrong pause between slides when using pager

javascript

jquery

slider

Fiddle

演示