Skip to content

Fader item

A fader item is a single slide within a Fader. Each item is shown in turn according to the fader's interval.

TIP

This component is best used within a Fader.

Slots

default
The content of the fader item.

Snippet

vue
<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>
        </FluxFader>
    </FluxAspectRatio>
</template>

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