Ionic slider + loop + click event issue

#1

hello friends,
I am using slider with dynamic data using property loop and autoplay

<ion-slides *ngIf="slides != null" loop="true"> <!-- autoplay="3000" loop="true" speed="800"-->
        <ion-slide *ngFor="let slide of slides; let i = index ;" >
            <img [src]="slide.BannerImage" (click)="fnGotoNewArrivalList(i)">
            <div class="con-box">
                <h2>{{slide.BannerName}}</h2>
            </div>
        </ion-slide>
    </ion-slides>

============================
import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

 @ViewChild(Slides) myslides: Slides;

slideChanged() {
    let currentIndex = this.myslides.getActiveIndex();
    alert('Current index is ' + currentIndex);
  }
  
  fnGotoNewArrivalList(collectionid){
    alert(JSON.stringify(collectionid ));
  }

Button/Click does not work when going from last slide to first slide
slide next and slide previous both scenario.

NOTE - its working fine without loop property

thank you,

#2

Hi, @spanchal

Could you check

Thanks

1 Like
#3

@addwebsolution thanks :slight_smile:

I have already tried.
but when apply loop to slider that time index not work proper :worried: otherwise its working fine.

#4

hello friends,

I have one alternate solution for slider click event issue,
using swiper I have solved this issue
follow this steps for implement swiper slider.

install “npm install angular2-swiper-wrapper --save-dev”

 <swiper class="swiper-container" [config]="config">
        <div *ngFor="let slide of slides">
            <div class="swiper-slide">
                <div class="detail-con-box">
                    <h2>{{slide.BannerName}}</h2>
                    <button ion-button color="btn" (click)="fnGotoNewArrivalList(slide.CollectionID,slide.BannerName)">Order Now</button>
                </div>
            </div>
        </div>
    </swiper>

=========== .ts file ===============
this.config = {
         speed: 1000,
        paginationClickable: true,
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: 2500,
        autoplayDisableOnInteraction: false,
        initialSlide : 0,
        slidesPerView: 1,
        effect: 'slide',
        // paginationType: 'progress',
        // pagination: '.swiper-pagination',
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
      };


Thank you. :slight_smile: