Question

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

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

我制作了一个Snippet，它有很多种方法可以停止并开始自动播放。由于只提供了部分代码，因此我无法准确诊断特定问题。以下是一些可能的原因：

bxSlider目前在过去两年中的版本为4.2.5，我确实记得在{v.1.1}和v中没有工作的stopAuto()和startAuto()方法的错误。 4.1.2。但这可能不是问题。
选项auto的值为2000，它应该是一个布尔值，因此当它收到2000而不是true或false时，它可能会将其解释为true，这就是它仍然起作用的原因。虽然它仍然起作用，但最好按照它的设计方式使用它并使用布尔值。
autoControlsCombine在原始代码中设置为true，但您没有提及bxSlider是否有任何停止/启动自动按钮。

在代码段中，我们有：

加载后2秒开始自动显示（auto，autoStart和＆amp; autoDelay）。
在auto中运行时，它将以2秒的间隔（pause）过渡到下一张幻灯片。
我们可以通过以下方式停止/启动车展：
- 将鼠标悬停在bxSlider（autoHover）
- 切换开始/停止自动按钮（autoControls＆amp; autoControlsCombine）
- 切换自定义按钮（.startAuto()＆amp; .stopAuto()）

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

<强>段

＆＃13;

$(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();
    }
  });

});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

bxSlider无法执行stopAuto？

1 个答案: