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

Posted 2021-04-12

我正在运行最新版本的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,
});

我非常感谢你的帮助。

答案

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）

Demo

（使用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 切换幻灯片时暂停 Youtube 视频

Bxslider：当幻灯片消失时，内容和下一个/上一个箭头会消失

“bxslider jquery”以指定的宽度更改幻灯片模式

php WordPress媒体库替换，将其转换为带有自定义寻呼机的bxSlider轮播。

bxSlider & Bootstrap 3 - 百分比幻灯片宽度

bxslider 使用帮助