Search code examples
javascripthtmlscrollsliderinteractive

Get current index in slider while scrolling

So let's say i have a slider like this.

(Blue rectangle is my screen, the red line is the middle of screen that indicates which slide we are in.)

enter image description here

We can navigate in the slider by free scrolling with mousepad/trackpad.

When the red line reach the left part of a slide (green rectangle) it means we reached the next slide.

(here we are reaching slide 2)

enter image description here

So while scrolling i need to know with a dynamic function / equation when we actually reached the next slide. (because slide width, number of slide can change)

I tried : (current position (px)) / (slide width + gap (px)) But i get a threshold in the middle of each slide and not at the left of the slide.

So i would be happy if anyone has a proposition / idea of calculation i should do to be able to detect the current index while scrolling.

(so i can notify user which slide he is looking at).

Solution

  • I would calculate distance from horizontal center of each slide to the center of screen. the smallest win.

    I faced similar issue when implementing autoplay when scrolling a vertical feed of videos. The logic I ended up using is checking for proximity to the center of the page, from the center of the video element.

    Glad it worked for you.