Pages

To snap in groups, make only the first slide of each group a snap point. Next then moves a page, and Dots and Counter count pages:

/* Three slides in view, three to a page, from 640px. */
@media (min-width: 640px) {
  .products [data-carouseldeck-slide] {
    width: calc(100% / 3);
  }
  .products [data-carouseldeck-slide]:nth-child(3n + 1) {
    scroll-snap-align: start;
  }
  .products [data-carouseldeck-slide]:not(:nth-child(3n + 1)) {
    scroll-snap-align: none;
  }
}

Each slide is still labelled "n of m" by slide. The index, scrollTo and a controlled index count pages, so when a breakpoint changes the page size, the same index points at different slides.