Implemented ion-slides dynamically with autoplay:
- if we enable autopaly click actions are not working inside the first slide if there are buttons to click,
- But Click event is working fine without autoplay for the same first-slide.
This is my code:
*<div ngIf=“flashCards && flashCards.cards && flashCards.cards.length>0”>
- <ion-slides #slides autoplay=“3000” loop=“true” speed=“500” pager=“true” style=“width: 100%; height: auto; margin-top: 0%;margin-bottom: -1%”*
-
*ngIf="showFlashCardBlogger">* -
<ion-slide *ngFor="let flashCard of flashCards.cards;let idx=index">* -
<ion-card class="carousel_1" style=" padding-bottom: 0px;">* -
<img style="border-radius: 0;width: 100%;height:250px;" [src]="flashCard.flash_image">* -
<div>* -
<ion-row style="position: absolute;top: 10px;width:94%;" class="carousel_row">* -
<ion-col col-1></ion-col>* -
<ion-col col-9>* -
<p style="color: #fff;* -
font-size: 2.2rem;line-height:1.1; margin-top: 4px;* -
">{{flashCard.blogger_name}}<br><span* -
style="font-size: 1.9rem;">of {{flashCard.zone_name}}</span></p>* -
</ion-col>* -
<ion-col col-2>* -
<img src="assets/images/close_new.svg" (click)="removeFlashCard()" style="* -
width: 56%;margin-left: 19px;margin-top: -1px;">* -
</ion-col>* -
</ion-row>* -
</div>* -
<p class="carousel_text1">Find her blogs at <span style=" padding-top: 4%;* -
padding-bottom: 4%;color:#65A0E6"* -
(click)="goToFlashLink(flashCard.blog_url)">{{flashCard.blogShort_url}}* -
</span>* -
<br>* -
Connect with her personally, and hang out with <br> her other fans right here.</p>* -
<button ion-button class="carousel_enterZone_button" (click)="joinZoneTimeline(flashCard.zone_id)">GO TO HER ZONE</button>* -
<ion-card class="carousel_card1">* -
<button ion-button class="carousel_seeFeatured_button" (click)="featuredBloggers()">SEE ALL FEATURED* -
BLOGGERS</button>* -
</ion-card>* -
</ion-card>* -
</ion-slide>* - *
- *
Thanks in advance.