Swiper 轮播

Display · Display component

Carousel content.

On-demand importwbbb-ui/components/swiper

Basic Usage

Example code

<script setup lang="ts">
import { WbbbSwiper } from 'wbbb-ui/components/swiper'
import 'wbbb-ui/styles/swiper'
</script>

<template>
  <WbbbSwiper />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

Image contentLoading图片失败Text card

API Reference

Props

Property	Description	Type	Default	Required
autoplay	Automatically advances to the next slide.	boolean	false	No
circular	Allows the carousel to loop from the last item to the first.	boolean	true	No
indicatorDots	Shows pagination dots for carousel items.	boolean	true	No
interval	Sets the delay between automatic carousel transitions in milliseconds.	number	3000	No
items	Provides the data items rendered by the component.	WbbbSwiperItem[]	() => []	No

Events

• change

Slots

• default

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.