title: How to make timer pagination with swiper slider
body: <p>Now, I'm trying to make swiper slide with timer pagination.
  I got timer pagination some of slick slider ex.</p>
  <p>Now, my timer pagination's speed is not same as slider's duration.</p>
  <p>and also not working in click event ㅜㅜ.</p>
  <p>Here is what I have so far:</p>
  <p>This is  the HTML section</p>
  <pre><code>&lt;!-- Slider main container --&gt;
  &lt;div class=&quot;swiper-container&quot;&gt;
      &lt;!-- Additional required wrapper --&gt;
      &lt;div class=&quot;swiper-wrapper&quot;&gt;
          &lt;!-- Slides --&gt;
          &lt;div class=&quot;swiper-slide&quot;&gt;Slide 1&lt;/div&gt;
          &lt;div class=&quot;swiper-slide&quot;&gt;Slide 2&lt;/div&gt;
          &lt;div class=&quot;swiper-slide&quot;&gt;Slide 3&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- If we need pagination --&gt;
      &lt;div class=&quot;swiper-pagination&quot;&gt;&lt;/div&gt;
  
      &lt;!-- If we need navigation buttons --&gt;
      &lt;div class=&quot;swiper-button-prev&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;swiper-button-next&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and CSS section</p>
  <pre><code>html,
  body {
    position: relative;
    height: 100%;
  }
  
  body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  }
  
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  
  .swiper-button-next, .swiper-button-prev {
    color: #000;
  }
  
  .swiper-slide {
    background-position: center center;
    background-size: cover;
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .swiper-pagination-bullet {
    position: relative;
    width: 150px;
    display: inline-block;
    z-index: 1;
    height: 10px;
    border-radius:0;
    background:#eaeaea;
    opacity:1;  
  }
  
  .inProgress {background-color:blue; width:0%; height:10px; opacity:1;}
  </code></pre>
  <p>and javascript here</p>
  <pre><code>$(document).ready(function(){
    var _is_speed = 3000;
    var swiper = new Swiper('.swiper-container', {
      speed: 1000,
      autoplay: {
        delay:_is_speed,
        waitForTransition: true,
        disableOnInteraction: false,
      },
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        bulletActiveClass:'active',
        renderBullet: function(index, className) {
          return '&lt;span class=&quot;'+className+'&quot;&gt;&lt;/span&gt;';
        },
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    
    //ticking machine
      var percentTime;
      var tick;
      var time = 1;
      var progressBarIndex = 0;
  
      $('.swiper-pagination .swiper-pagination-bullet').each(function(index) {
          var progress = &quot;&lt;div class='inProgress inProgress&quot; + index + &quot;'&gt;&lt;/div&gt;&quot;;
          $(this).html(progress);
      });
  
      function startProgressbar() {
          resetProgressbar();
          percentTime = 0;
          tick = setInterval(interval, 10);
      }
  
      function interval() {
          if ($('.swiper-slide').hasClass('swiper-slide-active') === &quot;true&quot; ) {
              progressBarIndex = $('.swiper-slide').data(&quot;swiper-slide-index&quot;);          
              startProgressbar();
          } else {
              percentTime += 1 / (time + 5);
              $('.inProgress' + progressBarIndex).css({
                  width: percentTime + &quot;%&quot;,
              });
              if (percentTime &gt;= 100) {
                  $('.swiper-slide').hasClass('swiper-slide-active');
                  progressBarIndex++;
                  if (progressBarIndex &gt; 2) {
                      progressBarIndex = 0;
                  }
                  startProgressbar();
              }
          }
      }
  
      function resetProgressbar() {
          $('.inProgress').css({
              width: 0 + '%'
          });
          clearInterval(tick);
      }
      startProgressbar();
      // End ticking machine
  
      $('.swiper-pagination span').click(function () {
          clearInterval(tick);
          var goToThisIndex = $(this).find(&quot;span&quot;).data(&quot;tabindex&quot;);
          swiper.slideNext();
          startProgressbar();
      });
    
  });
  </code></pre>
  <p><a href="https://codepen.io/mirabo333/pen/qBZyxPj" rel="nofollow noreferrer">https://codepen.io/mirabo333/pen/qBZyxPj</a></p>
  <p>Any help would be greatly appreciated.</p>