Ionic-framework: Slides: Button does not work when going from last slide to first slide

[judithhartmann]

Ionic version: (check one with "x")
[ ] 1.x
[ x] 2.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
When going from last slide to first slide (loop allowed) and having a button on the first slide, clicking the button on the first slide does not trigger (click) handler

Expected behavior:
Clicking the button on first slide triggers the handler regardless from where i navigate to that slide

Steps to reproduce:
http://plnkr.co/edit/490eabugyUIcROmeNPOy?p=preview

(See console output for button triggering)

Related code:

  <ion-slides loop="true" pager="true">
    <ion-slide>
      <h1>Slide 1</h1>
      <button ion-button  (click)="printTest(1)">
        Print to Console
      </button>
    </ion-slide>
    <ion-slide>
      <h1>Slide 2</h1>
      <button ion-button (click)="printTest(2)">
        Print to Console
      </button>
    </ion-slide>
    <ion-slide>
      <h1>Slide 3</h1>
    </ion-slide>
  </ion-slides>

Other information:
could be related to #10883

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.5.0
Ionic Framework Version: 2.3.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: macOS Sierra
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

[helloqingbing]

I think you touch the slide, you need to add "this.slider.autoplayDisableOnInteraction = false"

[baumandm]

I'm having the same issue, both in browser and Android device. Some more information: after looping back to the first slide, click events don't trigger, but sliding forward to the next slide does work as expected. This fixes it, allowing click events to work on subsequent slides (until it loops back to the beginning again).

[linguoqiu]

@baumandm hello , I'm having the same issue, But I don't know how to solve, you can be in detail how to solve? thank you ~~

[pavei]

Someone have solved this issue?

[AlanRezende]

The workaround I did to achieve the expected behavior was to put the click action on the slider wrapper and then in the .ts file I instantiate the slider using @ViewChild and with some calculations based on realIndex I got the slider that I clicked.

[pavei]

@AlanRezende can you send some code? Thks

[rebelholic]

I have same problem too

My Ionic Version

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 6.2.3
    Ionic Framework                 : ionic-angular 3.3.0

[Creawebs]

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.

Cordova CLI: 6.5.0
Ionic Framework Version: 3.4.2
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

[ivanmayes]

Also having this issue.

[sneko]

Any solution?

[15380831711]

I use ionSlideTap

jumpBanner() {
    let index = this.slides.getActiveIndex();
    if (index > this.bannerList.length) {
        index = 0;
    } else if (index > 0) {
        index = index - 1;
    }
    console.log(index);
}

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/260