Hi everyone!
I’m working with slides component and detect an extraneous behavior. When is seted the loop option to true, the click events on the last slide do not triggered.
It is really estrange and hard to detect.
Here is my html and my ts
html
>
<ion-header> <ion-navbar transparent hideBackButton class="android-attr"> <button menuToggle style="background-color: transparent;"> <ion-icon name='menu'></ion-icon> </button> <ion-title class="title"> <p light> </p> </ion-title> </ion-navbar> </ion-header> <ion-slides #Slider (ionDidChange)="onSlideChanged()" [options]="slidesOptions"> <ion-slide *ngFor="let slide of slides" [style.background-image]="setSlideBackground(slide.backgroundImage)" class="slide-background"> <div class="segment-overlay"> <div class="centered-content"> <img src="./images/logo_simple.png" class="logo" /> </div> <div class="centered-content-2"> <h1 class="slide-title"> {{slide.mainTitle}} </h1> <h2 class="slide-subtitle"> {{slide.mainSubTitle}} </h2> <br/> <button (click)="onSlideButtonClick(slide)" class='slide-button'> {{slide.buttonText}} </button> </div> </div> <ion-toolbar position="bottom" darkred style="min-height: 25%; color: white; z-index:300;"> <h4 style="font-weight: lighter; margin:1rem; text-align: center; -webkit-align-content: center; line-height: 110%;"> {{slide.description}} </h4> </ion-toolbar> </ion-slide> </ion-slides> </ion-content>
ts
import {OnInit, Component, NgZone, ViewChild, ElementRef} from '@angular/core';
import {Page, NavController, NavParams, MenuController, Alert, Slides, Platform} from 'ionic-angular';
import {PromotionService} from '../../providers/promotion-service/promotion-service';
import {NameTypeMapService} from '../../providers/name-type-map-service/name-type-map-service';
import {SectionsService} from '../../providers/sections-service/sections-service';
import {SessionService} from '../../providers/session-service/session-service';
import {DataService} from '../../providers/data-service/data-service';
import {Logger} from '../../providers/logger/logger';
import {DomSanitizationService, SafeStyle} from '@angular/platform-browser';
import {waitRendered} from '../utils';
import {Splashscreen} from 'ionic-native';
@Page({
templateUrl: 'build/pages/home/home.html',
providers: [PromotionService, SectionsService]
})
export class HomePage implements OnInit {
promotionableItems: Array<any>;
error: string;
slides: any;
user:any;
@ViewChild('Slider') _slider: Slides;
slidesOptions = {
direction: 'horizontal',
initialSlide: 0,
loop: true,
pager: true
};
currentDescription: string;
constructor(private nav: NavController,
private platform: Platform,
private entityService: PromotionService,
private sectionsService: SectionsService,
private sessionService: SessionService,
private nameTypeMapService: NameTypeMapService,
private dataService: DataService,
private zone: NgZone,
private menu: MenuController,
private logger: Logger,
private _elementRef: ElementRef,
private navParams: NavParams,
private sanitizer: DomSanitizationService) {
menu.enable(true);
this.logger.info("HomePage Constructor", "HomePage");
this.slides = navParams.get('sections');
this.sessionService.getDataUser().then(data => this.user = data);
}
ngOnInit() {
Splashscreen.show();
console.log("HOME: ngOnInit");
let swiperContainer = this._elementRef.nativeElement.getElementsByClassName('swiper-container')[0];
waitRendered(swiperContainer).then(() => {
let swiper = this._slider.getSlider();
console.log("updating slides");
swiper.update();
this._slider.update();
console.log("ngOnInit -> waitRendered");
});
}
ionViewWillEnter() {
console.log("will enter");
}
GoToPage(slide) {
let type = this.nameTypeMapService.map(slide);
this.nav.push(type, { section: slide });
}
onSlideChanged() {
let currentIndex = 0;
try {
currentIndex = this._slider.getActiveIndex();
} catch (err) {
console.log(err);
}
this.logger.info("Current Home Page Slide index is: " + currentIndex, "HomePage.onSlideChanged");
this.logger.environment();
if(this.platform.is('android'))
if (navigator && navigator.splashscreen) {
navigator.splashscreen.hide();
}
}
onSlideButtonClick(slide: any) {
this.GoToPage(slide);
}
ionViewLoaded() {
this.logger.end("view loaded");
}
ionViewDidEnter(){
this.logger.end("Did Enter");
}
setSlideBackground(slideImage: string) {
return this.sanitizer.bypassSecurityTrustStyle('url(' + slideImage + ')');
}
ngAfterContentInit() {
// Component content has been initialized
console.log("ngAfterContentInit");
}
ngAfterContentChecked() {
// Component content has been Checked
console.log("ngAfterContentChecked");
}
ngAfterViewInit() {
// Component views are initialized
console.log("ngAfterViewInit");
}
ngAfterViewChecked() {
// Component views have been checked
console.log("ngAfterViewChecked");
}
}
I saw in the Swiper github this issue marked as resolved Links in last slide are not clickable when loop option is true · Issue #334 · nolimits4web/swiper · GitHub
Thanks in advance,
Carlos.
