slick.jsを使ってページネーションをsvgを使った円状にしたい

こちらのサイトのようにスライダーのページねションをslick.jsを使用して円状にしたいです。
参考サイト

円状にすることはできたのですが、
slick.jsの自動再生とのタイミングがスライド2枚目以降微妙にズレが生じてしまいます。

現状のコードは下記に記述しました。

html
1<div class="article_slider" id="fv_slider">
2  <article class="list">
3    <div class="article_img">
4      <a href="" title="">
5        <img src="images/thumbnail.jpg" alt="">
6      </a>
7    </div>
8  </article>
9  <article class="list">
10    <div class="article_img">
11      <a href="" title="">
12        <img src="images/thumbnail.jpg" alt="">
13      </a>
14    </div>
15  </article>
16  <article class="list">
17    <div class="article_img">
18      <a href="" title="">
19        <img src="images/thumbnail.jpg" alt="">
20      </a>
21    </div>
22  </article>
23</div>
24<div id="slide_info">
25  <svg xmlns="http://www.w3.org/2000/svg" width="94px" height="94px" viewBox="0 0 94 94"><circle class="st0" cx="47" cy="47" r="46"/></svg>
26</div>

scss
1#slide_info {
2  position: absolute;
3  bottom: 64px;
4  right: 240px;
5  width: 92px;
6  height: 92px;
7  
8  svg {
9    position: absolute;
10    top: 50%;
11    left: 50%;
12    @include transform(translate(-50%, -50%));
13
14    .st0 {
15      fill: none;
16      stroke: $key_color;
17      stroke-width: 2;
18      stroke-miterlimit: 10;
19      stroke-dasharray: 0 289;
20      transition-duration: 1s;
21      transition-timing-function: ease-in-out;
22      animation: circle 6s linear infinite;
23    }
24  }
25
26  #slider_counter {
27    color: #222;
28    font: {
29      family: $en_font;
30      size: 16px;
31      weight: 400;
32    }
33    position: absolute;
34    top: 50%;
35    left: 50%;
36    letter-spacing: 1px;
37    @include transform(translate(-50%, -50%));
38
39    .current {
40      color: $key_color;
41      font: {
42        size: 24px;
43      }
44    }
45  }
46}
47
48@keyframes circle {
49  0% {
50    stroke-dasharray: 0 289;
51  }
52  100% {
53    stroke-dasharray: 289 289;
54  }
55}

js
1$('#fv_slider').on('init', function(event, slick) {
2  $('#slide_info').append('<div id="slider_counter"><span class="current"></span> / <span class="total"></span></div>');
3  $('.current').text(slick.currentSlide + 1);
4  $('.total').text(slick.slideCount);
5})
6.slick({
7  arrows: false,
8  autoplay: true,
9  autoplaySpeed: 6000,
10  draggable: false,
11  pauseOnHover: false,
12  swipeToSlide: true,
13})
14.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
15  $('.current').text(nextSlide + 1);
16});