OverviewFelgo 2 Support (Qt 5) › How to show several pictures using swipe or tab

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #21765

    Nuno Carvalho


    Suppose I have this Felgo sample code but instead of one source, I want to include several pictures that should be displayed  one by one using swipe or a tab. How can I do that?

     App {
       NavigationStack {
         Page {
           title: "Hello Felgo"
           AppImage {
             // The image fills the page completely, this can cause distortion depending on the image size
             anchors.fill: parent
             source: ""

    Wasswa Geoffrey

    if you a carousel functionality, i can help you with this


    import QtQuick 2.0
    import QtQuick 2.9
    import QtQuick.Controls 2.2
    Item {
        property var imgs:[]; // hold an array of images
    clip: true
    // use a SwipeView to produce the swipe functionality
        SwipeView {
            id: view
            anchors.fill: parent
            currentIndex: indicator.currentIndex
         Component.onCompleted: {
             // create another qml Component and
         var comp = Qt.createComponent("qml.qrc/../Image.qml");
             // loop through the array
        for(var i = 0; i < imgs.length; i++) {
        var t = comp.createObject(view);
            // bind the image souce from our image.qml with the urls stored in the Array
            t.src = Qt.binding(function() { return imgs[i] });
            // add the create component to the swipi view
        // indicators to show the number of avialable images
        PageIndicator {
            id: indicator
    width: parent.width
    height: parent.height
    color: "transparent"
            count: view.count
            currentIndex: view.currentIndex
    implicitHeight: 4
    implicitWidth: 16
    radius: 1
    color: "#ffffff"
    scale: index===indicator.currentIndex?1:0.85
    opacity: index === indicator.currentIndex ? 0.8 : 0.45
             Behavior on opacity {
                 OpacityAnimator {
                     duration: 300
    anchors.bottom: view.bottom
    anchors.horizontalCenter: parent.horizontalCenter


    import QtQuick 2.0
    import QtQuick.Controls 2.2
    import QtQuick.Controls.Material 2.2
    Item {
        property var src ;// property to hold the image source
        width: 100
    Rectangle {
       anchors.fill: parent
        color: "#e0e0e0"
        id: nameanc
        anchors.centerIn: parent
        Image {
            anchors.fill: parent
            fillMode: Image.PreserveAspectCrop
            source: src
            cache: false
            anchors.centerIn: parent
            Material.accent: "blue"



Viewing 2 posts - 1 through 2 (of 2 total)

RSS feed for this thread

You must be logged in to reply to this topic.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
create apps
create games
cross platform
native performance
3rd party services
game network
level editor
easiest to learn
biggest time saving
best support