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.
Premises
The slider is made with an horizontal CdkVirtualScroll (see the docs) element and work fine in mobile because you can drag the slides without adding javascript, plus it optimize the memory usage. The example is very semplified but the indicator component is the same I use in my project.
The code
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.
https://instagram-dots.stackblitz.io
Hope I've help someone, I'll read and respond to all of your comments
Top comments (1)
Hey, I created my solution with vue3
Code on Github
Real demo