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

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;
    }