Slides - Click event not working in the last slide


#1

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 https://github.com/nolimits4web/Swiper/issues/334

Thanks in advance,

Carlos.


#2

I am facing the same issue. Have you found any solutions for this? Thank you.


#3

I am facing the same issue. Have you found any solutions for this? Thank you.


#4

It seems to be a problem when you go from the first to the last slide and sometimes from the last to the first, I’m also facing this issue, and from what i could find in the docs and other posts relating this problem, its the duplicated slides that are created for increased performance that are not duplicating the click event.


#5

I’m also having this issue. It only occurs on the last slide when it should move on to the first slide (but doesn’t). The slider appears to move from the first slide to the last slide fine.


#6

Any updates in this issue? Workaround maybe?


#7

Hi Everyone, sorry for the late response.

This issue stops after we update to the final release of Ionic2.


#8

I still have the same issue on 3.5.0

I have the problem on my last slide, it has a click event and it doesn’t work only for the last slide when autoloop and autoplay are enabled.

It works when manually swiping from first backwards to last, but not when reaching the last slide automatically. Note: It works briefly if you click it right when it’s about to finish changing to first slide, just noting it in case it helps.

Cordova CLI: 6.5.0
Ionic Framework Version: 3.5.0
Ionic CLI Version: 2.2.2
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.8
ios-deploy version: Not installe
ios-sim version: Not installed
OS: Windows 8.1
Node Version: v6.9.4
Xcode version: Not installed

#9

This issue is still not fixed . It’s been more than a year :frowning:
ion slide with loop option causes the last slide and the first one to ignore click events. I explain:
I suppose we have 3 ion-slide with option loop.
If you look at your output code with your debugger. You’ll notice you have 5 ion-slide starting from index 0 to 4.
from index 1 to 3 those are your real slides they work fine. But index 0 and index 4 dont handle click events.
I tried to overcome this effect by changing the behavior of sliding but the performance is very bad.
Please fix this mess.


#10

@WinSystems Any chance you can share your code with us? Thanks =)


#11

the [loop] property creates mirror slides, so, a workaround is using somthing like this

 EventIonSlideReachEnd() {
    console.log("EventIonSlideReachEnd");
    
    setTimeout(
      ()=>{
        this.slides.slideTo(0,1000);
      },3000)
  }