bxSlider не может выполнить stopAuto?

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

Я сделал фрагмент, в котором есть несколько способов остановить и запустить автосалон. Поскольку предоставлена ​​только часть кода, я не могу точно диагностировать конкретную проблему. Вот несколько возможных причин:

1. bxSlider в настоящее время v. 4.2.5 в течение последних 2 лет, и я помню ошибку об обоих stopAuto() а также startAuto() методы, не работающие в v.4.1.1 и v.4.1.2. Это, вероятно, не проблема, хотя.

2. Опция auto имеет значение 2000, которое должно быть логическим, поэтому, когда он получил 2000 вместо true или false, он, вероятно, интерпретировал его как true, поэтому он все еще функционирует. Хотя он все еще функционирует, лучше использовать его так, как он был спроектирован, и использовать логическое значение.

3. autoControlsCombine в исходном коде было установлено значение true, но вы не упомянули, есть ли какие-либо кнопки остановки / запуска авто от bxSlider.

Во фрагменте мы имеем:

1. Автошоу начинается через 2 секунды после загрузки (auto, autoStart & autoDelay).
2. При запуске в автоматическом режиме он будет переходить к следующему слайду с интервалом в 2 секунды (pause).

3. Мы можем остановить / запустить автосалон:

   • парящий над bxSlider (autoHover)
   • переключение кнопки пуска / остановки авто (autoControls & autoControlsCombine)
   • переключение пользовательской кнопки (.startAuto() & .stopAuto())

Следующий фрагмент имеет дополнительные детали, прокомментированные в источнике:

SNIPPET

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