Search code examples
javascriptjquerysliderbxslider

bxSlider - Wrong pause between slides when using pager

I'm running the latest version of Bxslider (4.2.14), everything works great except for the pager.

When using the pager to switch between slides, pause is much shorter than it should be:

bxSlider Pager Pause issue

Steps to reproduce:

  1. Open the Fiddle: https://jsfiddle.net/Bruno42/smvhe3o4/7/
  2. When Slide #2 appears wait ~3-4 seconds
  3. Switch back to Slide #1 by clicking on the pager
  4. Pause should then last 5 seconds (like during the "auto" mode), but instead it lasts only 1-2 seconds

I think the Pause countdown should be resetted to 5 seconds every time a slide is selected using the Pager.

I spent a while trying to figure out a solution in the clickPagerBind() function in jquery.bxslider.js by using clearInterval(slider.interval); to fix this, however it did not work (slider gets stuck after that).

Code used to load bxSlider (also available on my JsFiddle):

$('.bxslider').bxSlider({
    maxSlides: 1,
    slideWidth: 800,
    pager: true,
    pagerType: 'full',
    autoHover: false,
    auto: true,
    stopAuto: false,
    stopAutoOnClick: false,
    speed: 1000,
    pause: 5000,
    mode: 'horizontal',
    controls: false,
});

I would really appreciate your help on that.

Solution

  • The speed: 1000 might be too fast for the transition to complete and for startAuto() and stopAuto() methods to start or end. In order to control what methods are called during transition we can use a callback from the bxSlider API. Make a custom function and call it on either onSlideAfter or onSlideBefore. The following demo calls function pagerFix() onSlideAfter:

    function pagerFix($bx, prv, nxt) {
  bx.stopAuto(true);
  bx.goToSlide(nxt);
  bx.stopAuto(false);
  bx.startAuto(true);
}

    When initializing .bxSlider() make sure you reference it so you can call the methods. 

    let bx = $('.bxslider').bxSlider(...

    Fiddle

    (uses onSlideBefore)

    Demo

    (uses onSlideAfter) 

    let bx = $('.bxslider').bxSlider({
  slideWidth: 800,
  auto: true,
  speed: 1000,
  pause: 5000,
  controls: false,
  onSlideAfter: pagerFix
});

function pagerFix($bx, prv, nxt) {
  bx.stopAuto(true);
  bx.goToSlide(nxt);
  bx.stopAuto(false);
  bx.startAuto(true);
}
    <link href='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css' rel='stylesheet'>

<ul class="bxslider" style="width: 800px; height: 250px;">
  <li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=1"></li>
  <li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=2"></li>
  <li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=3"></li>
  <li><img src="https://placehold.it/800x250/5E7074/FFFFFF&text=4"></li>
</ul>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js'></script>