Search code examples
bxslider

bxSlider can't execute stopAuto?

I am currently using bxSlider on my website. I am using the most recent version v4.1.2. The slider auto rotates. I have a button which executes an operation, but with this operation, I would also like it to pause the slider. According to the documentation, this is as simple as calling the public method:

slider.stopAuto()

However, I've been unable to get it to work. If I execute the .goToNextSlide() method, that works just fine in the button; but not .stopAuto().

For experimentation, decided to just call the .stopAuto() function immediately after creating the slider to see if it worked at all... and low and behold, it doesn't!

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

Does anyone know how I could fix this?

Solution

  • I have made a Snippet that has a number of ways to stop and start auto show. Since there's only a part of the code provided, I can't accurately diagnose a particular problem. Here are some possible reasons:

    1. bxSlider is currently v. 4.2.5 for the last 2 years and I do recall a bug about both stopAuto() and startAuto() methods not working in v.4.1.1 and v.4.1.2. This is probably not the problem, though.

    2. The option auto has a value of 2000 which is supposed to be a boolean, so when it received 2000 instead of true or false, it probably interpreted it as true which is why it functions still. Although it still functions, it's best to use it the way it was designed and use a boolean.

    3. autoControlsCombine was set to true in the original code, yet you didn't mention if there was any stop/start auto buttons from the bxSlider.

    In the Snippet, we have:

    1. Auto show starting 2 seconds after it loads (auto, autoStart, & autoDelay).
    2. When running in auto, it will transition to the next slide at 2 second intervals (pause).

    3. We can stop/start the auto show by:

    The following Snippet has further details commented in the source:

    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>