DEV Community

Cover image for I made some dots for a slider, Instagram style
Andrea Canton
Andrea Canton

Posted on • Updated on

I made some dots for a slider, Instagram style

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

Top comments (1)

Collapse
 
meekot profile image
meekot

Hey, I created my solution with vue3

Code on Github
Real demo
Demo