slickにページカウントをつけてかつ複数個設置したい

上記の記事を参考にページカウントの実装を進めていたのですが、
下記コードのようにページカウントがデザインの都合上.slickで指定しているclassとは違う箇所で表示させたいのですが、
↓こちらコードを使用しても実装できない状況です…。

idを振り分けず、eachなどで複数のスライダーに対応することは可能でしょうか？

$('.current', this)

スライダーのコードはこのようになっています。

$slick = $('.slick_slider');
$slick
.on('init', function(event, slick) {
	$('.slick_info').append('<div class="slider_counter"><span class="current"></span><span class="total"></span></div>');
	$('.current', this).text('0' + (slick.currentSlide + 1));
	$('.total', this).text(slick.slideCount);
})
.slick({
	//slickのオプション
})
.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
	$('.current', this).text('0' + (nextSlide + 1));
});

<div class="slick_content">
	<div class="slick_info"></div>
	<div class="slick_wrap">
		<ul class="slick_slider">
			<li><img src="imagesimg1.jpg"></li>
			<li><img src="imagesimg2.jpg"></li>
			<li><img src="imagesimg3.jpg"></li>
			<li><img src="imagesimg4.jpg"></li>
			<li><img src="imagesimg5.jpg"></li>
			<li><img src="imagesimg6.jpg"></li>
			<li><img src="imagesimg7.jpg"></li>
			<li><img src="imagesimg8.jpg"></li>
			<li><img src="imagesimg9.jpg"></li>
			<li><img src="imagesimg10.jpg"></li>
		</ul>
	</div>
</div>	
<div class="slick_content">
	<div class="slick_info"></div>
	<div class="slick_wrap">
		<ul class="slick_slider">
			<li><img src="imagesimg1.jpg"></li>
			<li><img src="imagesimg2.jpg"></li>
			<li><img src="imagesimg3.jpg"></li>
			<li><img src="imagesimg4.jpg"></li>
			<li><img src="imagesimg5.jpg"></li>
			<li><img src="imagesimg6.jpg"></li>
			<li><img src="imagesimg7.jpg"></li>
			<li><img src="imagesimg8.jpg"></li>
			<li><img src="imagesimg9.jpg"></li>
			<li><img src="imagesimg10.jpg"></li>
		</ul>
	</div>
</div>	
<div class="slick_content">
	<div class="slick_info"></div>
	<div class="slick_wrap">
		<ul class="slick_slider">
			<li><img src="imagesimg1.jpg"></li>
			<li><img src="imagesimg2.jpg"></li>
			<li><img src="imagesimg3.jpg"></li>
			<li><img src="imagesimg4.jpg"></li>
			<li><img src="imagesimg5.jpg"></li>
			<li><img src="imagesimg6.jpg"></li>
			<li><img src="imagesimg7.jpg"></li>
			<li><img src="imagesimg8.jpg"></li>
			<li><img src="imagesimg9.jpg"></li>
			<li><img src="imagesimg10.jpg"></li>
		</ul>
	</div>
</div>

kei344

2020/03/17 03:48

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

tanap

2020/03/17 03:54

アドバイスありがとうございます！行き詰まっている箇所としましては、こちらの記事と同じように複数のスライダーに対してそれぞれカウンターを設置したいのですが、参考記事とはhtmlの構成がデザインの都合上どうしても異なってしまい、それによって$('.current', this)と書き換えてもカウンターがそれぞれに設置できない状況です。 https://teratail.com/questions/186053 $('.slick_info')となっている箇所を$(this)に書き換えたらうまく行くのですが、デザインの都合上. slick_sliderの中ではなく、別要素としてhtmlを書きたいです。

kei344

2020/03/17 04:03

（質問文は編集できます）この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。また、eachを試したコードも提示されたほうが良いと思います。