Limit pagination on carousel

[paulGeoghegan]

I have a carousel that has 78 photos and I have enabled pagination. On desktop there is 78 dots spread across 1 or 2 lines depending on the screen size but on mobile it's around 7 lines. This is way to many and it would be great to be able to limit the amount of pagination dots displayed at once.

[claviska]

I wouldn't put that many slides in a carousel but, if you're going to do it, it's probably better to restyle the dots or hide them altogether. Hiding some of the dots doesn't seem like a good solution because we can't predict which ones the user will want to activate. Here's a quick mockup of something that might work better for you.

https://codepen.io/claviska/pen/zYVqqOr?editors=1100

I don't think there's much more we can do to improve the experience with large numbers of slides in a single carousel. I'm curious what your use case is, though.

[paulGeoghegan]

So honestly I do think it would be good to have. It's not quite the same but if you are on a shop page for example and there are 100 pages they don't show the numbers 1 to 100. They usually have the first number, then maybe 3 dots if you're on page 40 for example, then some of the page numbers around the page you are on, then 3 more dots, and then number 100.
I just think it would be a bit of a shame to limit the use of a carousel. I'm displaying a slideshow on a page which has images from different events escentially.

[paulGeoghegan]

@claviska so Instagram actually does this. They add a small dot to the left and or right if there are more than 5 slides.
https://www.instagram.com/p/C-CNT9uNVkV/?igsh=MTc1aDZnY2N5N2hucQ==