Ionic-framework: Ion-slides returns 1-based index for getActiveIndex when loop is set to true

[alkrauss48]

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:

Calling getActiveIndex() on an ion-slides element when that element has a [loop] input property set to true returns a 1-based index (e.g. 1, 2, 3, 4, etc.) - meaning the first element has an index of 1. It's never 0. If the [loop] input property is set to false, then it's 0-based. It specifically only becomes 1-based when it's set to true.

This only happens when the [loop] index is set to true. Otherwise, getActiveIndex() returns a 0 based index (0, 1, 2, 3, etc.)

Expected behavior:

Calling getActiveIndex() on an ion-slides element should always produce a 0-based index, regardless of whether it loops or not.

Steps to reproduce:

Just set the [loop] input property of an ion-slides element to true.

Related code:

  <ion-slides
    #itemImages
    class="ka-slides"
    [loop]="true"
    (ionSlideTap)="openImageGallery()"
    >

this.itemImages.getActiveIndex() returns 1 for the first item - which is undesired.

  <ion-slides
    #itemImages
    class="ka-slides"
    (ionSlideTap)="openImageGallery()"
    >

this.itemImages.getActiveIndex() returns 0 for the first item - which is correct.

Other information:

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

Cordova CLI: 6.5.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: 1.9.0
ios-sim version: 5.0.13
OS: OS X El Capitan
Node Version: v6.9.4
Xcode version: Xcode 8.2.1 Build version 8C1002

[alkrauss48]

Luckily, the temporary workaround is easy. If you know your slider is looping, then just use

this.slider.getActiveIndex() - 1

to find the proper index.

[jgw96]

Hello, thanks for opening an issue with us! We will look into this.

[yamanksm]

I have a similar issue but not the same,
with a slider of 0 to 6 indexes, loop is false
when trying to slide after the last slide the getActiveIndex() returns 7 although the last available index is 6
when I slide back one step only I get result 5
and when I used [loop]="true" I got indexes form 0 to 8
0 for the last slide
8 or 1 for the first slide
so I got lost
please help

[daviddk]

Especially when used with the slidePrev() and slideNext() methods this has some funky behaviour..

I simply have a log of getActiveIndex() in my onSliderChanged() method.
When using slidePrev() a 0 based index is returned.. however, when going through the slider with slideNext, a 1 based index is returned.

[marcovtwout]

The original component also has a property realIndex, which is also useful when looping slides: https://github.com/nolimits4web/Swiper/blob/master/CHANGELOG.md#swiper-340---released-on-october-16-2016

Try this.slides.realIndex instead of this.slides.getActiveIndex();. Does this solve your problem?

[andre-arsenault]

This also affects the slideTo method.

ie. if you call slideTo(0) on an ion-slides with loop set to true, you will scroll to (a duplicate of) the _last_ slide, not the _first_ slide!

The whole concept of duplicating elements at the beginning/end of the array when using looping feels like a horrendous hack that should be solved properly.

[chensifeng]

slideViewIndex = (this.slides.getActiveIndex() + 2) % 3
Otherwise, without loop="true", you can use "slideTo", "onSlideNextEnd()" and "onSlidePrevEnd()" to simulate loop effect for yourself.

[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/178