I'm currently working in a firm who develop software for utilities company (distributors of energy, gas and water). I'm in the web development team and I'm currently building an app (using capacitor) where final customer can check and pay bills, consumptions, send self-readings, etc.
I had to build an horizontal slide for the last bills, so this slide can have more than 10 elements in it. The problem was they want some indicators on the bottom, so I tought about instagram dots indicator.
The slider is made with an horizontal
I've made a component for the dots that mutate according the
length and the current
index. Note that works also for infinite scrolling with the length changing while scrolling!
The solution was to listen to changes with
ngChange functionality and change the class of indicator elements. Then set the css to make smooth transitions.
Try it out with your phone in device mode with Chrome dev tools.
Hope I've help someone, I'll read and respond to all of your comments