Hi there,
I’m interested in recreating the progress bars used in Instagram stories. These are the small horizontal bars at the top of the screen that indicate the duration of each story and the total number of stories in the series. I want to add them on top of an infinite slider of pictures.
I think I can do it with some custom Javascript and the progress bar, but I wanted to know if there was a more easy way. Especially I’d like to know when a slide is changing in the carousel.
Thanks !
You need to repeat a div for the length of your images collection basically. I’d need to see your data setup. Btw. if your sliders is infinite, then the bars would be infinitely small, just a tiny detail.
If you provide more context, I could direct you further.
Thanks for you answer !
Actually infinite slider is the name of the element I added. I have a finite number of pictures that are looping infinitely.
Not sure about what you need about the data setup but I have made a few screenshots of where I am now.
As you can see I already put the progress bars on top of the slider but I want them to progress when I’m on the picture linked to it, and to be full if the picture is before the shown picture.
I thought the best way to do it was to know what picture is shown but I don’t know how to achieve that.
Tell me if you need more info.
