Props

The <Swiper> component is generic — the type parameter T is inferred from the :slides prop, so your slot props are fully typed with no casting.

<script setup lang="ts">
import { Swiper } from "vue3-lite-swiper";

const slides = [
  { id: 1, title: "First" },
  { id: 2, title: "Second" },
  { id: 3, title: "Third" },
];
</script>

<template>
  <Swiper :slides="slides" :slide-width="300" :gap="16">
    <template #default="{ item }">
      <!-- item is typed as { id: number; title: string } -->
      <div class="slide">{{ item.title }}</div>
    </template>
  </Swiper>
</template>

Props reference

Prop	Type	Default	Description
slides	T[]	—	Required. The data array. Each element is passed as item in the default slot.
mode	"fixed" | "auto"	"fixed"	How slide widths and snap positions are resolved. See below.
slideWidth	number	—	Slide width in pixels. Required when mode="fixed".
gap	number	20	Horizontal gap between slides, in pixels.
slidesPerSwipe	number	1	Slides to advance per navigation step.
loop	boolean	false	Enable seamless infinite looping.
autoPlay	boolean	false	Advance automatically at a fixed interval.

mode

The mode prop controls how the swiper figures out each slide's width and where the snap positions land.

"fixed" — You provide slideWidth. Snap positions are computed mathematically without measuring the DOM. This is the fastest option and the right choice whenever every slide is the same width.

<Swiper :slides="slides" mode="fixed" :slide-width="300" />

"auto" — The component measures each slide's rendered width via getBoundingClientRect() after mount. Use this when slide widths differ or are driven by CSS rather than a fixed pixel value.

<Swiper :slides="slides" mode="auto" />

slideWidth is required in fixed mode

Omitting slideWidth while mode="fixed" logs an error and disables all snap navigation. Either pass slideWidth or switch to mode="auto".

Slots

default

Renders a single slide. It receives the typed slide data and its render index.

<Swiper :slides="items">
  <template #default="{ item, index }">
    <!-- item is typed as T -->
    <!-- index is the render position (may differ from the original when loop is active) -->
  </template>
</Swiper>

Slot prop	Type	Description
item	T	The slide's data, typed from your array.
index	number	Render position. When loop is enabled the component rotates the array internally, so this may not match the original array index.

Need an imperative handle?

Pair these props with the methods API to build pagination dots, prev/next buttons, or autoplay controls.