Click event on button not working inside ion-slide

Ionic Framework ionic-v3
1

well hello
I have a app where i have added a silder with button and on buttton i have wrritten (click) event
But problem is it is not getting triggered

Noticable thing is that click gesture (background changes when we click on button ) is there whenever i click on that button.

I have only one ion-slide in slides

html code

<ion-slides  autoplay="3500" loop="true" speed="3000">
<ion-slide *ngIf="img==''">
<div class="box">
<button ion-button icon-only (click)="profile()">
<ion-icon name="camera"></ion-icon>
</button>
<h6 no-padding no-margin >Upload Your Picture</h6>
<p no-padding no-margin class="margin12px">to get more matches</p>
<button ion-buttons></button>
</div>
</ion-slide>

<ion-slide>
<h5>Complete Your Profile</h5>
<button ion-button icon-end outline (click)="profile()">
Profile  <ion-icon name="person" ></ion-icon>
</button>
</ion-slide>

</ion-slides>

in ts file calling function

  profile(){
 console.log('profile');
  this.navCtrl.push(HomePage);
}
2

Can you please post a snippet of your code :slight_smile:

3

you didnt show any code, here is some working example:

<ion-slides *ngIf="gal== 1" pager="true" zoom="true" class="gal" initialSlide={{pic1}}>

<ion-slide *ngFor="let s of images">

<img src="{{s.pic_url}}" (click)="zoom(s.pic_url)">;

</ion-slide>

<ion-slides>
1 Like
4

Updated my question …
i getting this issue when my first condition is false so all i have only one slide in slides

5

Does it return any error on console?

May I know the value of img?

Thanks :blush:

6

i have backend for it from there i am getting value of img which could any img src and its string.

about errror thing as i mentioned the m click on it but nothing happens neither in console.

1 Like
7

same issue.
first time click event work for me. After that not working. html is below :

<ion-slides pager=“true” autoplay=“3000” loop=“true” *ngIf=“addBannerList?.length > 0”>
<ion-slide *ngFor=“let banner of addBannerList” (click)=“gotoLayerProfile(banner)”>



This is an Array of objects
addBannerList = [{image: “https://matrimonialadvocates.com/public/uploads/promotion/megha.jpg”, id: 637}]

8

Any Solution for this?

9

I made changes such as
In .ts file
import { Slides, Events } from ‘ionic-angular’;

@ViewChild(‘mySlider’) slides: Slides; //in class

ionViewWillLeave(){
this.slides.stopAutoplay();
}

ionViewDidEnter() {
this.slides.autoplayDisableOnInteraction = false;
this.slides.startAutoplay();
}

In .html file
<ion-list *ngIf=“addBannerList?.length > 0”>
<ion-slides pager=“true” #mySlider id=“mySlider” autoplayDisableOnInteraction = “false” autoplay=“4000” loop=“addBannerList?.length > 1”>
<ion-slide tappable *ngFor=“let banner of addBannerList”>
<img src="{{banner.image}}" (click)=“gotoLayerProfile(banner)”>


Its works for me.
I hope its work for you