slickのサムネイル付きスライダーで現在のページ数を表示させたい

前提・実現したいこと

slickを使用してサムネイル付きのスライダーを実装しています。
こちらの参考記事（https://www.nxworld.net/tips/jquery-plugin-slick-slide-counter.html）を元にスライドの現在のページ数を表示させたいのですがスライドの総数が6枚以上だと正常に表示されるのですが５枚未満（slidesToShowで指定した枚数未満）だと現在の枚数が1のままカウントされません

スライダーは問題なく動いておりスライドの総数も正常に表示されております。

該当のソースコード

html
1 <div class="gallery">
2 <div><img src="./img/img01.jpg" alt=""></div>
3 <div><img src="./img/img02.jpg" alt=""></div>
4 <div><img src="./img/img03.jpg" alt=""></div>
5 <div><img src="./img/img04.jpg" alt=""></div>
6 <div><img src="./img/img05.jpg" alt=""></div>
7 </div>
8 <div class="gallery-nav">
9 <div><img src="./img/img01.jpg" alt=""></div>
10 <div><img src="./img/img02.jpg" alt=""></div>
11 <div><img src="./img/img03.jpg" alt=""></div>
12 <div><img src="./img/img04.jpg" alt=""></div>
13 <div><img src="./img/img05.jpg" alt=""></div>
14 </div>

js
1 $(window).load(function(){
2	$('.gallery').on('init', function(event, slick) {
3    $(this).append('<div class="slick-counter"><span class="current"></span> / <span class="total"></span></div>');
4    $('.current').text(slick.currentSlide + 1);
5    $('.total').text(slick.slideCount);
6  })
7	$('.gallery').slick({
8		autoplay: false,
9		infinite: true,
10		slidesToShow: 1,
11		slidesToScroll: 1,
12		fade: false,
13		asNavFor: '.gallery-nav',
14		prevArrow: '<button></button>',
15		nextArrow: '<button></button>'
16	});
17	$('.gallery-nav').slick({
18		accessibility: true,
19		autoplay: false,
20		arrows: false,
21		infinite: true,
22		slidesToShow: 5,
23		slidesToScroll: 1,
24		asNavFor: '.gallery',
25		focusOnSelect: true
26	})
27	.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
28	    $('.current').text(nextSlide + 1);
29	  });
30});