Component Ref

Vue3 Lite Swiper exposes an imperative API via a template ref. Get a reference to the component instance with useTemplateRef (Vue 3.5+):

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

const swiper = useTemplateRef("swiper");
</script>

<template>
  <Swiper ref="swiper" :slides="slides" :slide-width="300" />
</template>

Methods

next()

Advance to the next snap position. When loop is enabled and the swiper is at the boundary, the strip rotates to maintain seamless infinite scrolling.

swiper.value?.next();

previous()

Move to the previous snap position. When loop is enabled and the swiper is at the start, the strip rotates backward.

swiper.value?.previous();

goToIndex(index)

Jump directly to a snap position by index.

swiper.value?.goToIndex(0); // first slide
swiper.value?.goToIndex(3); // fourth snap position

Parameter	Type	Description
index	number	Zero-based snap index. Throws if out of bounds.

Snap positions vs slides

goToIndex operates on snap positions, not the raw slides array. With slidesPerSwipe: 2 and 8 slides, there are 4 snap positions (indices 0–3).

pagination

A reactive computed property available on the component instance. Use it to build custom navigation UI.

swiper.value?.pagination;
// { current: number, total: number }

Property	Type	Description
current	number	Zero-based index of the active snap position. -1 if not aligned.
total	number	Total number of snap positions.

Examples

Pagination dots

<template>
  <Swiper ref="swiper" :slides="slides" :slide-width="300">
    <template #default="{ item }">
      <div class="slide">{{ item }}</div>
    </template>
  </Swiper>

  <div class="dots">
    <button
      v-for="(_, i) in swiper?.pagination.total"
      :key="i"
      :class="{ active: swiper?.pagination.current === i }"
      @click="swiper?.goToIndex(i)"
    />
  </div>
</template>

Disabled boundary buttons

<template>
  <button
    :disabled="swiper?.pagination.current === 0"
    @click="swiper?.previous()"
  >
    Prev
  </button>

  <button
    :disabled="
      swiper?.pagination.current === (swiper?.pagination.total ?? 1) - 1
    "
    @click="swiper?.next()"
  >
    Next
  </button>
</template>