[Nuno Carvalho]

Hi,

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: "https://felgo.com/web-assets/girl.jpg"
       }
     }
   }
 }

[Wasswa Geoffrey]

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

ImageSwipe.qml

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
    view.addItem(t);

    }

}


    }

    // indicators to show the number of avialable images
    PageIndicator {
        id: indicator
background:Rectangle{
width: parent.width
height: parent.height
color: "transparent"
}
        count: view.count
        currentIndex: view.currentIndex
delegate:Rectangle{
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

}

}

Image.qml

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
    height:100

Rectangle {
   anchors.fill: parent
    color: "#e0e0e0"
    id: nameanc
    anchors.centerIn: parent

    Image {
        id:image
        anchors.fill: parent
        fillMode: Image.PreserveAspectCrop
        source: src
        asynchronous:true
        cache: false

        BusyIndicator{
        anchors.centerIn: parent
        Material.accent: "blue"
        running:image.status===Image.Loading
        }
    }

}

}