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. 0,2. Это, вероятно, не проблема.

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

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>