<div class="swiper-container">

<div class="swiper-wrapper">

<div class="swiper-slide">Slide 1 <p>123.</p></div>
<div class="swiper-slide">Slide 2 <p>321.</p></div>
<div class="swiper-slide">Slide 3 <p>123</p></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

/* svg style */
.circ {transform: rotate(-90deg);}
.circ circle {stroke-dasharray: 440px;}
.circ1 {stroke-dashoffset: 440px;}

/* overwrite swiper */
.swiper-slide {height: 200px;}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 40px;}
.swiper-pagination-bullet {background: 0;}
.swiper-pagination-bullet-active .circ1 {stroke-dashoffset: 220px; transition: linear 2s stroke-dashoffset; transform: scale(1);}
.swiper-button-prev, .swiper-button-next {display: none;}

var mySwiper = new Swiper ('.swiper-container', {
loop: true,
speed: 600,
autoplay: 1400,
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// add SVG in bullets
paginationBulletRender: function (swiper, index, className) {
return `<span class="${className}"><svg class="circ" width="90" height="90" class="circ">
<circle class="circ1" cx="46" cy="46" r="33" stroke="#FF964C" stroke-width="3" fill="none"/>
<circle class="circ2" cx="46" cy="46" r="33" stroke="#7F3400" stroke-width="1" fill="none"/>
</svg></span>`;
}
});