Introduction

fs-swiper is used to display a horizontal carousel of images or cards, supporting both image carousel and card carousel modes.

• Image carousel supports three indicator styles: centered, right-aligned, and hidden.
• Card carousel supports both normal sliding and a scaling mode that highlights the current card.
• Supports autoplay, loop playback, item-tap events, and animation-finish events.

Suitable for scenarios that require horizontal content switching such as home banners, promotional slots, and recommendation card streams.

Usage

Local import — configure it in the index.json of the page or component that needs it:

{
  "usingComponents": {
    "fs-swiper": "ava-ui/fxui/fs-swiper/index"
  }
}

Code demos

Basic demo

The example covers the following scenarios:

• Image carousel: indicators centered, right-aligned, hidden
• Card carousel: normal switch, scaling switch

API

Properties

Property	Description	Type	Optional values/format	Default
items	Carousel data list; each item is recommended to contain { src, text } and may also carry custom business fields	array	[{ src, text, ... }]	[]
type	Carousel type	string	image / card	image
indicatorPosition	Indicator position; only displayed in image carousel	string	center / right / none	center
cardMode	Card carousel mode	string	normal / scale	normal
autoplay	Whether to autoplay	boolean	true / false	false
interval	Autoplay interval, in ms	number	-	3000
duration	Slide animation duration, in ms	number	-	500
circular	Whether to loop	boolean	true / false	true
height	Carousel height, in px	number	-	150
scaleRatio	Scaling ratio for non-active cards in card scale mode	number	0 ~ 1	0.9
sideWidth	Exposed width of adjacent cards in card carousel, in px	number	-	30
borderRadius	Image corner radius in image carousel, in px	number	-	0
extStyle	Custom container style	string	CSS style string	''

Slot

Name	Description
default	Custom card content slot

Events

Event name	Description	Callback parameters
change	Fires when the carousel switches	{ current, source }
itemtap	Fires when a carousel item is tapped	{ index, item }
animationfinish	Fires when the carousel animation ends	{ current }

Design notes

• type="image" uses the image carousel layout and supports bottom indicators.
• type="card" uses the card carousel layout; cardMode="normal" is normal sliding, and cardMode="scale" highlights the current card.
• scaleRatio only takes effect when cardMode="scale"; it controls the scaling ratio of non-active cards.
• sideWidth controls the exposed width of cards and the horizontal rhythm in card mode.
• If items contains a text field, a text layer is overlaid at the bottom of the image or card.

Preview

打开预览