Tiny-slider: getInfos function doesn't return logical index

Created on 15 Oct 2018 · 7Comments · Source: ganlanyuan/tiny-slider

Hi :)
I have a slider with images in the background, I therefore need to have my images outside my slider and change manually via JS the active image.
Here is the html :

<HTML FOR SLIDER>

<figure data-figure="0" class="is-active">
  <img src="http://placehold.it/1440x1980">
</figure>

<figure data-figure="1">
  <img src="http://placehold.it/1440x1980">
</figure>

<figure data-figure="2">
  <img src="http://placehold.it/1440x1980">
</figure>

On the slider events I bind the changeIndex event, I get the the new index from

const infos = this.slider.getInfo();
return infos.index - infos.cloneCount;

The issue is, by default, the slider is at slide 0, so are my images, but when I trigger the changeIndex event by pressing Next for example, this returns me also 0, although I am on slide number 1 now ...
So impossible for me to change the background image, because I can't get the correct one.

Did anyone else have the same issue ?
Thanks.

enhancement

Source

ThaoD5

Most helpful comment

Added displayIndex to the info object in this commit. Now you can use it like:

slider.events.on('transitionEnd', function (info, eventName) {
  console.log(info.displayIndex);
});

// or
var currentSlide = slider.getInfo().displayIndex;

ganlanyuan on 23 Oct 2018

👍7

All 7 comments

Hi, could you post a full demo?

ganlanyuan on 15 Oct 2018

Hello @ganlanyuan

Here is a fiddle of the demo you requested
https://jsfiddle.net/vcr2sphx/

I found the reason of the issue , the index returned in the console log is not the same when pressing next, when the slider is init with and without mode: 'gallery' passed as parameter

Also, when removing the mode: 'gallery' the slider indexChanged event triggers twice at start/end of the slider loop, this is quite problematic for a use case like mine where I show/hide images based on this event index

I hope this helped :)

ThaoD5 on 16 Oct 2018

carousel and gallery have different formula regarding the visual index:

carousel: cloneCount + visual_index
gallery: visual_index

To make it clear, maybe it's better to add one more variable (displayIndex or visualIndex) to present the current visual index, as @jayden2 requested.

Also, when removing the mode: 'gallery' the slider indexChanged event triggers twice at start/end of the slider loop, this is quite problematic for a use case like mine where I show/hide images based on this event index

This occur in carousel slider when reach the edges. The slider need to adjust its position to prepare itself for the next transition, that's why there is another "index change" after the original transition. Even though the slider position changed, the visual index will be the same. If we have a visualIndex, this issue will be fixed also.

ganlanyuan on 22 Oct 2018

👍2

@ganlanyuan yes, just something that is understandably just for visual representation.

I would like to also point out that the readme for index: index, // current index can be interpreted as a displayable index.

jayden2 on 23 Oct 2018

Added displayIndex to the info object in this commit. Now you can use it like:

slider.events.on('transitionEnd', function (info, eventName) {
  console.log(info.displayIndex);
});

// or
var currentSlide = slider.getInfo().displayIndex;

ganlanyuan on 23 Oct 2018

👍7

Glad to hear there was some interest in my issue !
Sounds great, did a workaround for now, but will definitely try it out next time 👍
Thanks for the interest @ganlanyuan :)

ThaoD5 on 24 Oct 2018

Is there a CDN version of TNS that includes this enhancement?