I want create circular carousel with SwiperJs. but I could not 
This is design. I want slides circular. Can I do that with SwiperJs?
This is my HTML:
<div class="swiper controller-slider">
<div class="swiper-wrapper">
<div class="swiper-slide" data-title="KOSGEB" data-desc="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ">
<div class="item">
<img src="./assets/images/controllers/controller-4.png" alt="">
</div>
</div>
<div class="swiper-slide" data-title="Türkiye Cumhuriyeti Ticaret Bakanlığı" data-desc="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ">
<div class="item">
<img src="./assets/images/controllers/controller-1.png" alt="">
</div>
</div>
<div class="swiper-slide" data-title="Türkiye Cumhuriyeti Ticaret Bakanlığı" data-desc="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ">
<div class="item">
<img src="./assets/images/controllers/controller-2.png" alt="">
</div>
</div>
<div class="swiper-slide" data-title="TÜBİTAK" data-desc="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ">
<div class="item">
<img src="./assets/images/controllers/controller-3.png" alt="">
</div>
</div>
<div class="swiper-slide" data-title="Sanayi Sanayi Başkanlığı" data-desc="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ">
<div class="item">
<img src="./assets/images/controllers/controller-5.png" alt="">
</div>
</div>
<div class="swiper-slide" data-title="Türkiye Cumhuriyeti Ticaret Bakanlığı" data-desc="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. ">
<div class="item">
<img src="./assets/images/controllers/controller-6.png" alt="">
</div>
</div>
</div>
</div>
And this is my JS codes:
const slide = new Swiper(item, {
centeredSlides: true,
loop:true,
slideToClickedSlide:true,
pagination: {
el: ".controller-slider-wrapper .swiper-pagination",
clickable: true,
renderBullet: function renderBullet(index, className) {
return '<span class="' + className + '">' + "</span>";
}
},
slidesPerView: 2,
spaceBetween: 10,
breakpoints: {
768: {
slidesPerView: 4,
},
1200: {
slidesPerView: 5,
},
1400: {
slidesPerView: 6,
},
},
});
slide.on('slideChange', function (e) {
handleSlideChange(slide)
});
slide.on('progress', function (e) {
handleProgress(slide)
});
and this is looks like:
I try use onProgress events. Try somethings but it did not worked. Please help me!