bxSlider 无法执行stopAuto？

Question

我目前正在我的网站上使用 bxSlider。我使用的是最新版本 v4.1.2。滑块自动旋转。我有一个执行操作的按钮，但通过此操作，我还希望它暂停滑块。根据文档，这就像调用 public 方法一样简单：

slider.stopAuto()

但是，我无法让它工作。如果我执行 .goToNextSlide() 方法，它在按钮中工作得很好；但不是 .stopAuto().

为了进行实验，决定在创建滑块后立即调用 .stopAuto() 函数以查看它是否有效...很低，看，它没有！

var slider = $('#featuresGrid ul').bxSlider({
    adaptiveHeight: true,
    autoHover: true,
    autoDelay: 2000,
    auto: 20000,
    mode: 'fade',
    speed: 1000,
    pause: 20000,
    pager: true,
    controls: true,
    autoControls: true
});

slider.stopAuto();

有谁知道我该如何解决这个问题？

Answer 1

我制作了一个片段，其中包含多种停止和开始车展的方法。由于只提供了部分代码，我无法准确诊断特定问题。以下是一些可能的原因：

bxSlider 在过去 2 年中目前是 v.4.2.5，我确实记得一个关于 stopAuto() 和 startAuto() 方法在 v.4.1 中不起作用的错误。 1 和 v.4.1.2。不过，这可能不是问题所在。
选项 auto 的值为 2000，这应该是一个布尔值，所以当它收到 2000 而不是 true 或 false 时，它可能将其解释为 true，这就是为什么它仍然起作用。虽然它仍然有效，但最好按照设计的方式使用它并使用布尔值。
autoControlsCombine 在原始代码中设置为 true，但您没有提及 bxSlider 是否有任何 stop/start 自动按钮。

在代码段中，我们有：

加载后 2 秒自动显示 (auto, autoStart, & autoDelay)。
当运行处于自动模式时，它将以 2 秒的间隔 (pause) 切换到下一张幻灯片。
我们可以通过以下方式stop/start车展：
- 将鼠标悬停在 bxSlider 上 (autoHover)
- 切换 start/stop 自动按钮 (autoControls & autoControlsCombine)
- 切换自定义按钮 (.startAuto() & .stopAuto())

以下代码段在来源中有更多详细信息：

片段

$(function() {
  var slider = $('#bx').bxSlider({
    /* Auto Config */
    auto: true, // Boolean not number
    pause: 2000, // 2 second intervals
    autoStart: true, // Required by autoDelay
    autoDelay: 2000, // Start after 2 seconds
    /* Control Config */
    autoControls: true, // Auto start/stop buttons
    autoControlsCombine: true, // Makes autoToggle
    autoHover: true, // Hover to stop 
    /* Misc Config */
    mode: 'fade',
    pager: false, // Unclutter the bottom to see toggle
    slideMargin: 30 // This and 1px padding to center
  });

  // Delegate click event on label, .bx-start, .bx-stop

  $('label').on('click', function() {

    // If the checkbox is NOT checked...
    if (!$('#auto').is(':checked')) {

      //... start the auto show...
      slider.startAuto();
    } else {

      //... stop  the auto show
      slider.stopAuto();
    }
  });

});

.bx-wrapper,
.bx-viewport {
  min-height: 150px;
}
li,
ul,
img {
  margin: 0 auto;
  display: block;
  width: 100%;
  min-height: 150px;
  height: auto;
  padding: 0 1px 0 0;
}
#auto {
  display: none;
}
#auto + label::before {
  content: 'AUTO';
  cursor: pointer;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  background: black;
  color: yellow;
  padding: 5px;
  transition: all 1s linear;
}
#auto:checked + label::before {
  content: 'STOP';
  background: yellow;
  color: black;
  padding: 5px;
  transition: all 1s linear;
}

<link href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet">

<ul id='bx'>
  <li>
    <img src='http://placehold.it/150x75/000/fff?text=1'>
  </li>
  <li>
    <img src='http://placehold.it/150x75/00f/eee?text=2'>
  </li>
  <li>
    <img src='http://placehold.it/150x75/0e0/111?text=3'>
  </li>
  <li>
    <img src='http://placehold.it/150x75/f00/fff?text=4'>
  </li>
  <li>
    <img src='http://placehold.it/150x75/fc0/000?text=5'>
  </li>
  <li>
    <img src='http://placehold.it/150x75/fff/000?text=6'>
  </li>
</ul>

<input id='auto' type='checkbox' checked>
<label for='auto'>&nbsp;</label>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>

bxSlider 无法执行stopAuto？

bxSlider can't execute stopAuto?

bxslider