loading...
Cover image for I made some dots for a slider, Instagram style

I made some dots for a slider, Instagram style

andreacanton profile image Andrea Canton Updated on ・1 min read

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.

Instagram style dots

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

Posted on by:

andreacanton profile

Andrea Canton

@andreacanton

Full-stack developer based in Verona, Italy. Usability and UX maniac. Vegetarian since birth. He/Him.

Discussion

markdown guide