ion-slides click not proper working when slides last index move to first index - ionic-framework

Question

it's work perfect when slides first index to last but when auto loop go to last index to first index click property is not working.
<ion-slides *ngIf="slides != null" autoplay="3000" loop="true" speed="800" >
<ion-slide *ngFor="let slide of slides" >
<img [src]="slide.BannerImage">
<div class="con-box">
<h2>{{slide.BannerName}}</h2>
<br/>
<button ion-button color="btn" (click)="fnGotoNewArrivalList(slide.CollectionID,slide.BannerName)">Order Now</button>
</div>
</ion-slide>
</ion-slides>

Answer 1

#jatin devani please try this code..
replace ion-slides in place use swiper
html
<!-- Swiper -->
<swiper class="swiper-container" [config]="config" #usefulSwiper>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</swiper>
index.html
<script src="assets/js/swiper.jquery.min.js"></script>
<script src="assets/js/swiper.min.js"></script>
.ts file
config:any;
this.config = {
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
initialSlide : 0,
slidesPerView: 1,
// paginationType: 'progress',
// pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
};
css file
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}