FlipView-DEMO

---

<fv-FlipView v-model="value">
</fv-FlipView>

FlipView Custom Template

---

<fv-FlipView v-model="images">
    <template v-slot:item="x">
        <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
    </template>
</fv-FlipView>

FlipView Vertical Direction

---

<fv-FlipView v-model="images" direction="vertical">
    <template v-slot:item="x">
        <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
    </template>
</fv-FlipView>

FlipView Mask

---

<fv-FlipView v-model="images" mask="rgba(36,36,36,0.6)">
    <template v-slot:item="x">
        <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
    </template>
</fv-FlipView>

FlipView Different Animation

---

<fv-FlipView v-model="images" animation="fold">
    <template v-slot:item="x">
        <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
    </template>
</fv-FlipView>

FlipView Dark Theme

---

<fv-FlipView v-model="images" theme="dark">
    <template v-slot:item="x">
        <div style="position: relative; width: 100%; height: 100%; background: rgba(36,36,36,1); display: flex; justify-content: center; align-items: center;">
            <p style="font-size: 36px; color: whitesmoke;">Dark Theme</p>
        </div>
    </template>
</fv-FlipView>

FlipView Show Control Panel

---

<fv-FlipView v-model="images" theme="dark" showControlPanel="hover">
    <template v-slot:item="x">
        <div style="position: relative; width: 100%; height: 100%; background: rgba(36,36,36,1); display: flex; justify-content: center; align-items: center;">
            <p style="font-size: 36px; color: whitesmoke;">Dark Theme</p>
        </div>
    </template>
</fv-FlipView>

Properties

---

Property	Type	Required	Default	Description
modelValue	array	No	[]	Flipview template data
direction	string	No	'horizontal'
animation	string	No	'move'	move, moveFade, moveDifferent, glue, push, fold
duration	number	No	800
autoPlay	boolean	No	true
autoPlayDuration	number	No	5000
showControlPanel	string	No	''
mask	string	No	''	The mask color of control panel
theme	string	No	'global'	Theme style. Supports global, light, dark, system, and custom.
disabled	boolean	No	false	See the FlipView disabled option.
lang	string	No	"global"	See the FlipView lang option.

Events

---

Event	Arguments	Description
change	object	See the component change option.

Slots

---

1. Input

<template v-slot:item="x">
    <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
</template>