Making Image Slider with QML

2 min readJul 28, 2018

Well today I’m going to show you how to make an Image Slider in QML step by step , And you will see how easy it is .

I will assume that you already Install and run basic QML Projects but nothing more .

What we are going to build is something like this :

The first thing we want is a swipeview so we can swipe image left and right, making swipe view in QML is pretty easy :

SwipeView{
    id:slider
    anchors.fill:parent
    clip:true//setting it make item outside of view invisible   
    property var model : ListModel{}//make empty model    
    Repeater {
      model:slider.model
      Image{ 
         width: slider.width 
         height: slider.height    
         source:image //we use this name in ListModel   
         fillMode: Image.Stretch
      }
   }
}

The tricky part is to make a property name model for showing data, so we can fill the model from outside of slider .

And for Items inside of slider we use Repeater , Repeater is basically repeat components inside it (in this case Image ) base on the model you give it, so now we can have unlimited number of image side by side.

Making slider is finished :) and now it’s time to give it some data.

For this example we can use append function of ListModel :

Component.onCompleted: {
//just a bunch of random image from internet
//keep in mind the key name is "image" and should be same as what we use in Repeater slider.model.append({image:"http://www.shropshiresgreatoutdoors.co.uk/wp-content/uploads/2015/08/Prices-Dingle-400x400.jpg"}) slider.model.append({image:"http://1.bp.blogspot.com/-6PYPT11obnA/Tlc9KFGj1HI/AAAAAAAAFUc/5I_IeithKZ8/s400/Latest-Nature.jpg"}) slider.model.append({image:"http://www.shropshiresgreatoutdoors.co.uk/wp-content/uploads/2015/08/Prices-Dingle-400x400.jpg"}) slider.model.append({image:"http://1.bp.blogspot.com/-6PYPT11obnA/Tlc9KFGj1HI/AAAAAAAAFUc/5I_IeithKZ8/s400/Latest-Nature.jpg"})}

Component.OnCompleted is a function whichs run after instantiating components, and it’s a great place to fill models with data.

Now Let’s add those page indicator on the bottom of the slider:

PageIndicator {
   anchors.top: slider.bottom  //anchor to bottom of slider
   x:(parent.width-width)/2 //make it horizontally center
   currentIndex: slider.currentIndex //current item?
   count: slider.count //how many items?
}

I’s pretty easy too , we use Qt’s PageIndicator component for it and give it two necessary parameter “currentIndex” and “count”

That’s it , now we have a hand made cross platform Image Slider that you can use on android/ios/windows/… with just few lines of code.

The Complete code is :

import QtQuick 2.0
import QtQuick.Controls 2.2ApplicationWindow {
   visible: true
   width: 400
   height: 600
   title: qsTr("Image Slider")   SwipeView{
      id:slider
      anchors.top: parent.top
      anchors.topMargin:verticalMargin
      height: parent.height/1.7
      width: height
      x:(parent.width-width)/2//make item horizontally center
      property var model :ListModel{}
      clip:true      Repeater {
          model:slider.model
          Image{
             width: slider.width
             height: slider.height
             source:image
             fillMode: Image.Stretch
          }
      }
   }   PageIndicator {
      anchors.top: slider.bottom
      anchors.topMargin: verticalMargin
      x:(parent.width-width)/2
      currentIndex: slider.currentIndex
      count: slider.count
   }Component.onCompleted: {
 slider.model.append({image:"http://www.shropshiresgreatoutdoors.co.uk/wp-content/uploads/2015/08/Prices-Dingle-400x400.jpg"}) slider.model.append({image:"http://1.bp.blogspot.com/-6PYPT11obnA/Tlc9KFGj1HI/AAAAAAAAFUc/5I_IeithKZ8/s400/Latest-Nature.jpg"}) slider.model.append({image:"http://www.shropshiresgreatoutdoors.co.uk/wp-content/uploads/2015/08/Prices-Dingle-400x400.jpg"}) slider.model.append({image:"http://1.bp.blogspot.com/-6PYPT11obnA/Tlc9KFGj1HI/AAAAAAAAFUc/5I_IeithKZ8/s400/Latest-Nature.jpg"})
 }
}

Making Image Slider with QML

Written by Omid