Pagination Component

The Pagination component provides interactive indicators that allow users to navigate directly to specific slides.

Basic Usage

<script setup>
import { Pagination as CarouselPagination } from 'vue3-carousel'
</script>

<template>
  <Carousel>
    <Slide v-for="slide in 10" :key="slide">
      <!-- slide content -->
    </Slide>
    
    <template #addons>
      <CarouselPagination />
    </template>
  </Carousel>
</template>

Props

Prop	Type	Default	Description
disableOnClick	Boolean	false	When true, disables navigation when clicking pagination buttons
paginateByItemsToShow	Boolean	false	Groups slides into pages based on itemsToShow setting

The component renders nothing while the carousel is locked by the disableWhenSlidesFit prop.

Styling

With a custom classPrefix, carousel in the class names used below (for example .carousel__pagination-button) is replaced by the prefix.

CSS Custom Properties

Variable	Default Value	Description
--vc-pgn-active-color	var(--vc-clr-primary)	Active pagination button color
--vc-pgn-background-color	var(--vc-clr-secondary)	Pagination button background color
--vc-pgn-border-radius	0	Pagination button border radius
--vc-pgn-gap	6px	Gap between pagination buttons
--vc-pgn-height	4px	Pagination button height
--vc-png-bottom	10px	Bottom spacing for pagination
--vc-png-left	auto	Left spacing for vertical mode
--vc-png-right	10px	Right spacing for vertical mode
--vc-pgn-width	16px	Pagination button width

Customization Examples

There are two ways to customize the pagination appearance:

1. Using CSS Custom Properties

.carousel {
  --vc-pgn-background-color: white;
  --vc-pgn-active-color: red;
  --vc-pgn-border-radius: 5px;
  --vc-pgn-height: 5px;
  --vc-pgn-width: 5px;
}

2. Direct CSS Override

.carousel__pagination-button {
  height: 5px;
  width: 5px;
  border-radius: 5px;
  background-color: white;
}
.carousel__pagination-button--active {
  background-color: red;
}

Accessibility

• Pagination buttons are properly labeled for screen readers
• Active state is communicated through ARIA attributes
• Buttons include descriptive titles for better UX