Fader

Faders are used to fade between multiple items using a particular interval. They can be used in headers to fade between multiple image slides.

Props

interval?: number
The time a view is visible in milliseconds.
Default: 9000

Emits

update: [number]
Triggered when the visible view changes.

Slots

default ({
    readonly current: number;
    next(): void;
    previous(): void;
})
The views of the fader.

Examples

Basic

A simple and basic fader.

Preview

Code

<template>
    <FluxAspectRatio
        :aspect-ratio="16 / 9"
        style="width: 100%;">
        <FluxFader :interval="3000">
            <FluxFaderItem>
                <img
                    src="/assets/demo/image-1.jpg"
                    alt="">
            </FluxFaderItem>

            <FluxFaderItem>
                <img
                    src="/assets/demo/image-2.jpg"
                    alt="">
            </FluxFaderItem>

            <FluxFaderItem>
                <img
                    src="/assets/demo/image-3.jpg"
                    alt="">
            </FluxFaderItem>

            <FluxFaderItem>
                <img
                    src="/assets/demo/image-4.jpg"
                    alt="">
            </FluxFaderItem>

            <FluxFaderItem>
                <img
                    src="/assets/demo/image-5.jpg"
                    alt="">
            </FluxFaderItem>
        </FluxFader>
    </FluxAspectRatio>
</template>

<script
    lang="ts"
    setup>
    import { FluxAspectRatio, FluxFader, FluxFaderItem } from '@flux-ui/components';
</script>