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

Question

我正在运行最新版本的 Bxslider （4.2.14），除寻呼机外，其他所有功能都很好。

使用寻呼机在幻灯片之间切换时，暂停时间比原先应该的短得多：

复制步骤：

1. 打开小提琴： https://jsfiddle.net/Bruno42/smvhe3o4/7/
2. 当幻灯片＃2出现时，请等待约3-4秒
3. 通过单击寻呼机切换回幻灯片＃1
4. 然后，暂停应持续5秒钟（例如在“自动”模式下），但只能持续1-2秒

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

我花了一段时间尝试通过使用clickPagerBind()来解决jquery.bxslider.js中clearInterval(slider.interval);函数中的解决方案，但是它不起作用（滑块在此之后被卡住了）

用于加载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>