Installation

Install the package using your preferred package manager.

bun

bun add vue3-lite-swiper

npm

npm install vue3-lite-swiper

pnpm

pnpm add vue3-lite-swiper

yarn

yarn add vue3-lite-swiper

Basic Example

A minimal setup using fixed-width slides with previous and next navigation controls.

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

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

const swiper = useTemplateRef("swiper");

const slides = [
  { label: "Slide 1", color: "#60a5fa" },
  { label: "Slide 2", color: "#34d399" },
  { label: "Slide 3", color: "#a78bfa" },
];
</script>

<template>
  <Swiper
    ref="swiper"
    :slides="slides"
    mode="fixed"
    :slide-width="220"
    :gap="16"
  >
    <template #default="{ item }">
      <div :style="{ background: item.color }">{{ item.label }}</div>
    </template>
  </Swiper>

  <button @click="swiper?.previous()">Prev</button>
  <button @click="swiper?.next()">Next</button>
</template>