Reactive Carousel navigation

I doubt this is possible, but just wanted to reach out here to double check.   

We are working on a new reactive web application and one of the requirements is to have a carousel with a handful of elements.   (easy enough)   The trouble comes when we get into the specifics, let's say we have 5 items that should be rotating.   The UX specifies that we should show 3 of the 5 on the web screen with the current item being slightly larger than the cards on the left and right.  


It also specifies that that dots below the 3 items match the total number of rotating items.   So for this example I set the carousel up to display 3 items and OS creates 2 dots below because there are two partial sets of 3.   Any ideas how to update that portion of the navigation to show 5 vs 2 dots?


Note:  The example screenshot is actually a list of 12 items so we get 4 dots.  In that instance I would want 12 dots.  (we would never actually use a list that large with this use case)