SwiperPaginationPrimitive

Pagination (bullets or "2 / 8" fraction) for a SwiperRootPrimitive carousel.

import SwiperPaginationPrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperPaginationPrimitive";

Adds Swiper pagination to a primitive carousel. Place it inside SwiperRootPrimitive, after SwiperPrimitive. options takes Swiper pagination options or true (default: bullets). { type: "fraction" } renders a bordered white pill with "current / total"; { dynamicBullets: true } keeps many bullets compact. See SwiperRootPrimitive for the full composition.

#Usage

<script setup lang="ts">
import SwiperRootPrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperRootPrimitive";
import SwiperPrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperPrimitive";
import SwiperSlide from "@wikicasa-dev/components/generic/carousel/SwiperSlide";
import SwiperPaginationPrimitive from "@wikicasa-dev/components/generic/carousel/Primitive/SwiperPaginationPrimitive";
</script>

<template>
  <SwiperRootPrimitive class="photos">
    <SwiperPrimitive>
      <SwiperSlide v-for="n in 5" :key="n"><img :src="`/img/casale-${n}.jpg`" :alt="`Casale in Toscana, foto ${n}`" /></SwiperSlide>
    </SwiperPrimitive>
    <SwiperPaginationPrimitive :options="{ dynamicBullets: true }" />
  </SwiperRootPrimitive>
</template>

<style scoped>
.photos :deep(.swiper-pagination-bullet-active) { --swiper-pagination-color: rgb(var(--uikit-color-w-primary)); }
</style>

#Do / Don't

• Do render it unconditionally from the start; it registers with the root while the carousel is created.
• The active bullet is white by default (made for photos). On light backgrounds override --swiper-pagination-color.
• class lands on the .swiper-pagination element; e.g. set --swiper-pagination-bottom there.

#Styling hooks

--swiper-pagination-color, --swiper-pagination-bullet-inactive-color, --swiper-pagination-bullet-inactive-opacity, --swiper-pagination-bullet-width / -height, --swiper-pagination-bottom.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
options	SwiperPaginationPrimitiveProps	true

Events

None.

v-model

None.

Slots

None.

Exposed (template ref)

None.