CODEWITHSUNDEEP
javascriptjquerybxslider
NPI
NPI

Reputation: 43

Bxslider set different side pause length hangs on page

I am looking to solve a problem with bxslider regarding setting a different pause length for each slide. I initially followed the solution here and it worked great for 5 or 6 slides but after the sideshow grew past 10-15, the spinner just hangs now:

Screenshot here.

Here's the slider code I'm using based on the above example:

<script>
$(document).ready(function(e) {
    var ImagePauses = [15000,15000,15000,15000,15000,15000,15000,10000,10000,10000,10000,10000,10000,5000,5000,5000,5000,5000,5000,5000];

    var slider = $('.bxslider').bxSlider();
    modifyDelay(0);

    function modifyDelay(startSlide){
        slider.reloadSlider({
            mode: 'horizontal',
            //infiniteLoop: true,
            auto: true,
            autoStart: true,
            autoDirection: 'next',
            autoHover: true,
            pause: ImagePauses[startSlide],
            autoControls: false,
            pager: true,
            pagerType: 'full',
            controls: true,
            //captions: true,
            //speed: 500,
            startSlide: startSlide,
            onSlideAfter: function($el,oldIndex, newIndex){
                modifyDelay(newIndex);  
            } 
        });
    }
});
</script>

Is there anything glaring that I'm missing? Thanks.

Upvotes: 2

Views: 977

Answers (1)

zer00ne
zer00ne

Reputation: 44086

UPDATE

It seems there's more involved in making bxSlider custom auto features. I realized that setTimeout(), goToNextSlide(), and goToSlide() methods are not needed if the auto option is used.

I made 3 object literals, each representing a bxSlider options. When the next set of intervals up, a switch() will call reloadSlider() method with the next set of bxSlider options.

OLD

We can control the delay of the slide intervals by using the callback onSlideAfter and the callback function called bxDelay() uses setTimeout and the method goToNextSlide(). Details are commented in the source.

SNIPPET

.as-console.as-console * {
  background: orange;
  color: black;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>bxArraySourcePauseInterval</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
  <style>
    img {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>

  <ul class="bx">
    <li>
      <img src="http://placehold.it/350x150/000/fff?text=1">
    </li>
    <li>
      <img src="http://placehold.it/350x150/00f/fc0?text=2">
    </li>
    <li>
      <img src="http://placehold.it/350x150/0e0/000?text=3">
    </li>
    <li>
      <img src="http://placehold.it/350x150/f00/fff?text=4">
    </li>
    <li>
      <img src="http://placehold.it/350x150/fff/000?text=5">
    </li>
  </ul>


  <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>
  <script>
    $(function() {
      var count = 0;
      var cfg0 = {
        auto: true,
        pause: 3000,
        autoStart: true,
        autoHover: true,
        onSlideAfter: bxDelay
      }
      var cfg1 = {
        auto: true,
        pause: 2000,
        autoStart: true,
        autoHover: true,
        onSlideAfter: bxDelay
      }
      var cfg2 = {
        auto: true,
        pause: 1000,
        autoStart: true,
        autoHover: true,
        onSlideAfter: bxDelay
      }
      var bx = $('.bx').bxSlider(cfg0);

      function bxDelay($obj, from, to) {
        count++;
        switch (count) {
          case 8:
            bx.reloadSlider(cfg1);
            break;
          case 15:
            bx.reloadSlider(cfg2);
            break;
          case 22:
            bx.reloadSlider(cfg0);
            count = 0;
            break;
          default:
            break;
        }
        console.log('Count: ' + count);
      }

    });
  </script>

</body>


</html>

Upvotes: 1

Related Questions