Flux

Fader ​

The fader fades between multiple items on a set interval, for example to cycle through image slides in a header.

Accessibility

The fader is exposed as a carousel (role="group" with aria-roledescription="carousel") and each item as a slide. Inactive slides are marked aria-hidden. Autoplay pauses on hover by default (pause-on-hover), and you can pause it externally with is-paused. Autoplay only runs when there is more than one item.

Props

autoplay?: boolean
Whether the fader automatically advances through its items. Autoplay only runs when there is more than one item.
Default: true

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

is-paused?: boolean
Pauses autoplay while true. Useful for pausing the fader from outside, for example while a dialog is open.

pause-on-hover?: boolean
Pauses autoplay while the pointer is hovering the fader.
Default: true

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>

Autoplay

Autoplay advances the fader on the configured interval. With pause-on-hover it stops while the pointer is over it.

<template>
    <FluxAspectRatio
        :aspect-ratio="16 / 9"
        style="width: 100%;">
        <FluxFader
            :interval="2000"
            pause-on-hover>
            <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>
        </FluxFader>
    </FluxAspectRatio>
</template>

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

Disable autoplay and drive the fader from your own controls. Slot bindings expose next and previous.

<template>
    <FluxAspectRatio
        :aspect-ratio="16 / 9"
        style="width: 100%; position: relative;">
        <FluxFader :autoplay="false">
            <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 ​