[jQuery]slickでスライドを中央寄せして総数表示する方法

jQuery

<script src="slick.min.js"></script>
<script>
$(document).ready(function(){
var $status = $('.slidecounter');
var $slickElement = $('.slider');
	$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
		var i = (currentSlide ? currentSlide : 0) + 1;
		$status.text(i + '/' + slick.slideCount);
    });

    $slickElement.slick({
		centerMode: true,
		infinite: true,
		autoplay: true,
		dots: true,
		centerPadding:'150px',
		slidesToShow: 1,
		responsive: [
		{
		  breakpoint: 768,
		  settings: {
			centerMode: true,
			centerPadding: '0',
			slidesToShow: 2
		  }
		},
		{
		  breakpoint: 480,
		  settings: {
			arrows: false,
			centerMode: true,
			centerPadding: '0',
			slidesToShow: 1
		  }
		}]
    });
});
</script>