swipe-pagination

Vanilla JS · React · Vue · Svelte

Pagination you can swipe.

One responsive line of page numbers that you scroll instead of step through. Jump from page 1 to page 3,000 with a flick, never wrap onto a second line, and render only the numbers on screen.

npm i swipe-pagination

Swipe or drag-scroll the numbers, tap the arrows (tap them fast), or tab in and use ← → Home End.

1,234 of 5,000 – DOM nodes Showing –

Why

No detours

With classic pagination, getting from page 1 to page 50 means clicking through the pages in between, and each one loads. Here you swipe to page 50 and tap it once.

One line at any width

Once pages reach the thousands, the buttons get wide and wrap onto a second line on phones. Every page lives in one scroll area, so the strip stays on one line even at 320px. Widen it and you just see more pages.

Thousands of pages, few nodes

Rendering 5,000 buttons freezes the page. Only the visible numbers are rendered, and each number is only as wide as its digits, so no space is wasted.

Playground

Drag the handle at the bottom-right of the box to resize it. Every control maps to an option or method.

getActive()
getTotal()
getVisibleRange()
DOM nodes
onChange

    Themes

    Every theme reads its UI library's CSS variables, so your brand colors, radius and dark mode carry over. Import one file. For utility-first CSS such as Tailwind, pass classNames instead.

    Usage

    API

    Options

    Methods

    CSS variables

    Class names

    The built-in classes are always present. Strings in classNames are appended, so they add to the styling and never replace the layout.

    How it works

    1. A native scroll area. The numbers sit on one wide, empty track inside a horizontally scrolling box. Touch, trackpad and wheel scrolling come from the browser, momentum included.
    2. Width per digit count. On start, one number of each length (8, 88, 888 …) is measured. Pages with the same digit count share one width.
    3. Position ⇄ page in O(digits). A page's left edge is the sum over digit tiers. Page 15 sits at 9 × w₁ + 5 × w₂. The inverse turns a scroll position back into a page.
    4. Render what's visible. On scroll, only the pages in view (plus a little overscan) are rendered and recycled, absolutely positioned. With 1,000,000 pages there are still about 20 elements.