slint/examples/carousel/ui/carousel.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Theme } from "theme.slint";

export component Carousel inherits FocusScope {
    in-out property <int> selected-index;
    in property <length> spacing;
    in property <length> itemWidth;
    in property <int> count: 0;

    callback move-right();
    callback move-left();
    callback move-focus-up();

    move-right => {
        root.selected-index = min(root.selected-index + 1, root.count - 1);
    }

    move-left => {
        root.selected-index = max(root.selected-index - 1, 0);
    }

    private property <length> center-x: (root.width - Theme.size-big) / 2;
    private property <duration> duration: Theme.duration-regular;

    forward-focus: focus-scope;
    height: Theme.size-big;

    focus-scope:= FocusScope {
        key-pressed(event) => {
            if(event.text == Key.UpArrow) {
                root.move-focus-up();
                return accept;
            }

            if(event.text == Key.RightArrow) {
                root.move-right();
                return accept;
            }

            if(event.text == Key.LeftArrow) {
                root.move-left();
                return accept;
            }

            return accept;
        }
    }

    TouchArea {
        clicked => {
            focus-scope.focus()
        }

        width: parent.width;
        height: parent.height;
     }

    Rectangle {
        clip: true;
        background: transparent;

        Flickable {
            interactive: false;
            viewport-x: root.center-x - root.selected-index * (root.itemWidth + root.spacing);

            animate viewport-x { duration: root.duration; easing: ease-in; }

            HorizontalLayout {
                spacing <=> root.spacing;

                @children
            }
        }
    }
}