Slider with index (linking animations)

[popland]

based on a sample i got here on the forum i come up with an infinite slider, now my goal is to have a sort of index below it that indicates the slide i'm in

so that the the index grow and shrink (at the moment is static with the first active) based on the slide, and also clicking the index will move to the correct slide

 

basically i need to know which slide number i'm in (so i know which is next slider too) and trigger a shrink animation on the current index and grow animation to the next index synced with the slide movement, hoping my explaination make sense!

 

any help will be appreciated

See the Pen XWNRKbB by lenna-the-vuer (@lenna-the-vuer) on CodePen

[ZachSaucier]

Hey popland. What part of it are you stuck on?

[popland]

hello @ZachSaucier

i just can not find a way to know which "index" of my array of slides is currently the one showing, so i can (i think while im in the "updateProgress" function) animate the corresponding index of the array of thicks (the red thicks over the prev/next button)

[ZachSaucier]

You just need to create a wrapping function for the indexes like this (place it somewhere near but after your slides variable):

const wrap = gsap.utils.wrap(0, slides.length);

Then inside the animateSlides function you'll need to call it like so:

const index = wrap(-x / slideWidth);
console.log(index);