Pagination

Pagination Dots Carousel

Frame 1

Frame 2

Frame 3

Frame 4

Frame 5

Frame 6

Frame 7

Show codeHide code

import {
  useSnapIndicators,
  useSnapNavigation,
} from '@volvo-cars/react-headless';
import { IconButton } from '@volvo-cars/react-icons';
import { useRef } from 'react';

export function PaginationDotsCarousel() {
  const ref = useRef<HTMLDivElement>(null);
  const { previousButtonProps, nextButtonProps } = useSnapNavigation({ ref });
  const { indicators } = useSnapIndicators({ ref });

  const count = 7;

  return (
    <section
      className="container-sm stack-16 py-s"
      data-bleed="until-md"
      aria-label="Carousel"
    >
      <div ref={ref} className="reel scrollbar-none">
        {[...Array(count).keys()].map((key, index) => (
          <div
            id={`dots-frame-${index + 1}`}
            className="snap-center aspect-4/3 w-full flex-shrink-0 flex items-center justify-center bg-feedback-green"
            key={key}
          >
            <h3 className="text-center" id={`dots-frame-${index + 1}-title`}>
              Frame {index + 1}
            </h3>
          </div>
        ))}
      </div>
      <ul className="pagination-dots">
        {indicators.map((props, index) => (
          <li key={props.id}>
            <button {...props}>
              <span className="sr-only">Go to frame {index + 1}</span>
            </button>
          </li>
        ))}
      </ul>
      <div className="container-sm flex gap-16 mt-24 justify-end">
        <IconButton
          icon="chevron-back"
          variant="filled"
          color="subtle"
          {...previousButtonProps}
        />
        <IconButton
          icon="chevron-forward"
          variant="filled"
          color="subtle"
          {...nextButtonProps}
        />
      </div>
    </section>
  );
}

Pagination Numbers

Frame 1

Frame 2

Frame 3

Frame 4

Frame 5

Frame 6

Frame 7

1/0

Show codeHide code

import {
  useSnapIndicators,
  useSnapNavigation,
} from '@volvo-cars/react-headless';
import { IconButton } from '@volvo-cars/react-icons';
import { useRef } from 'react';

export function PaginationNumbers() {
  const ref = useRef<HTMLDivElement>(null);
  const { previousButtonProps, nextButtonProps } = useSnapNavigation({ ref });
  const { indicators, activeIndex } = useSnapIndicators({ ref });

  return (
    <div className="container-sm py-s">
      <section className="stack-16" data-bleed="until-md" aria-label="Carousel">
        <div ref={ref} className="reel scrollbar-none">
          {[...Array(7).keys()].map((key, index) => (
            <div
              key={key}
              id={`numbers-frame-${index + 1}`}
              className="snap-center aspect-4/3 w-full flex-shrink-0 flex items-center justify-center bg-feedback-green"
            >
              <h3
                className="text-center"
                id={`numbers-frame-${index + 1}-title`}
              >
                Frame {index + 1}
              </h3>
            </div>
          ))}
        </div>
        <div className="font-16 mt-24 flex justify-center">
          {activeIndex + 1}/{indicators.length}
        </div>
        <div className="container-sm flex gap-16 justify-end">
          <IconButton
            icon="chevron-back"
            variant="filled"
            color="subtle"
            {...previousButtonProps}
          />
          <IconButton
            icon="chevron-forward"
            variant="filled"
            color="subtle"
            {...nextButtonProps}
          />
        </div>
      </section>
    </div>
  );
}

Pagination Numbers Filled

1 / 0

Frame 1

Frame 2

Frame 3

Frame 4

Frame 5

Frame 6

Frame 7

Show codeHide code

import {
  useSnapIndicators,
  useSnapNavigation,
} from '@volvo-cars/react-headless';
import { IconButton } from '@volvo-cars/react-icons';
import { useRef } from 'react';

export function PaginationNumbersFilled() {
  const ref = useRef<HTMLDivElement>(null);
  const { previousButtonProps, nextButtonProps } = useSnapNavigation({ ref });
  const { indicators, activeIndex } = useSnapIndicators({ ref });

  return (
    <div className="container-sm relative py-s">
      <span className="pill-filled absolute z-overlay mt-24 end-24">
        {activeIndex + 1} / {indicators.length}
      </span>
      <section className="stack-16" data-bleed="until-md" aria-label="Carousel">
        <div ref={ref} className="reel scrollbar-none">
          {[...Array(7).keys()].map((key, index) => (
            <div
              id={`filled-frame-${index + 1}`}
              className="snap-center aspect-4/3 w-full flex-shrink-0 flex items-center justify-center bg-feedback-green"
              key={key}
            >
              <h3
                className="text-center"
                id={`filled-frame-${index + 1}-title`}
              >
                Frame {index + 1}
              </h3>
            </div>
          ))}
        </div>
        <ul className="pagination-dots">
          {indicators.map((props, index) => {
            return (
              <li key={props.id}>
                <button {...props}>
                  <span className="sr-only">Go to frame {index + 1}</span>
                </button>
              </li>
            );
          })}
        </ul>
        <div className="container-sm flex gap-16 mt-24 justify-end">
          <IconButton
            icon="chevron-back"
            variant="filled"
            color="subtle"
            {...previousButtonProps}
          />
          <IconButton
            icon="chevron-forward"
            variant="filled"
            color="subtle"
            {...nextButtonProps}
          />
        </div>
      </section>
    </div>
  );
}