Flux

Appearance

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.

<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>

Slot bindings expose `next` and `previous` so you can drive the fader from your own controls.

<template>
    <FluxAspectRatio
        :aspect-ratio="16 / 9"
        style="width: 100%; position: relative;">
        <FluxFader :interval="9999999">
            <template #default="{next, previous}">
                <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>

                <div style="position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px">
                    <FluxSecondaryButton
                        icon-leading="angle-left"
                        @click="previous"/>

                    <FluxSecondaryButton
                        icon-leading="angle-right"
                        @click="next"/>
                </div>
            </template>
        </FluxFader>
    </FluxAspectRatio>
</template>

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

Used components ​