カルーセルに番号を振ったら、番号がずれてしまいます。

表題の通りですが、カルーセルでランキングを制作したのですが、番号が正しく振られないという現象に困っています。
JSで制御するしかないのか、cssやHTML(olタグにするとか)で調整できるのか、ご教授いただけますと幸いです。

html
1<div class="swiper-container">
2    <!-- Additional required wrapper -->
3    <div class="swiper-wrapper">
4        <!-- Slides -->
5        <div class="swiper-slide"><a href="#"><img src="img.jpg"></a></div>
6        <div class="swiper-slide"><a href="#"><img src="img.jpg"></a></div>
7        <div class="swiper-slide"><a href="#"><img src="img.jpg"></a></div>
8        <div class="swiper-slide"><a href="#"><img src="img.jpg"></a></div>
9        <div class="swiper-slide"><a href="#"><img src="img.jpg"></a></div>
10        <div class="swiper-slide"><a href="#"><img src="img.jpg"></a></div>
11        <div class="swiper-slide"><a href="#"><img src="img.jpg"></a></div>
12        <div class="swiper-slide"><a href="#"><img src="img.jpg"></a></div>
13    </div>
14    <!-- If we need pagination -->
15    <div class="swiper-pagination"></div>    
16    <!-- If we need navigation buttons -->
17    <div class="swiper-button-prev"></div>
18    <div class="swiper-button-next"></div>
19</div>

css
1.swiper-container {width: 100%;}
2.swiper-slide img {width: 100%;}
3.swiper-wrapper {counter-reset: wpp-ranking;}
4.swiper-wrapper div { list-style-type: none;padding: 5px 0 0 0;position: relative;}
5.swiper-wrapper div:before {background: #000; border-radius: 50%; content: counter(wpp-ranking, decimal);counter-increment: wpp-ranking;color: #fff;font-size: 14px;line-height: 1;padding: 8px 12px;position: absolute;top: 0;left: 0;}
6.swiper-pagination-bullet-active {background: #737373;}

js
1$(function() {
2var mySwiper = new Swiper ('.swiper-container', {
3  loop: true,
4  slidesPerView: 3,
5  spaceBetween: 10,
6  centeredSlides : true,
7  pagination: '.swiper-pagination',
8  nextButton: '.swiper-button-next',
9  prevButton: '.swiper-button-prev',
10  breakpoints: {
11    767: {
12      slidesPerView: 2,
13      spaceBetween: 0
14    }
15  }
16})