SwiftUI Image Slider

SwiftUI does not any direct View to make an Image Slider. But there are ways we can make Image Slider easily. We will use three important Views of SwiftUI to make a Slider.

1. ZStack
2. TabView
3. Image

They are simple enough to understand and work with. Let's get started. 

First we need to delcare our images in a variable. Let's do it it.

    ///  images with these names are placed  in my assets
    let images = ["welcome-one","welcome-two","welcome-three"]

Why do we use ZStack?

That's because with ZStack we would be able to put one view onto the other one. Since we wanna make an Image Slider, it means one image would be overlaping the other on touch. ZStack provides convenient mechanism for this.

Why do we use TabView? 

Because TabView allows us to have interactive views. Since we are going to tap and move the images, so we need TabView. Previously we said we are going to do overlapping of the images. ZStack supports overlapping of it's childrens, but does not know how to do it. And it's not gonna happen automatically. We do have to it using TabView.

and since we are going to use images to make slider, we need to use Image() view. Make sure that before you use Image() view, wrap it around using forEach() loop. Now see our code so far

    ///  images with these names are placed  in my assets
    let images = ["welcome-one","welcome-two","welcome-three"]
    
    var body: some View {
        
        ZStack{
            Color.black
            TabView(selection : $selection){
                
                ForEach(0..<3){ i in
                    Image("\(images[i])").resizable()
                        .frame(width: .infinity
                        )
                        .ignoresSafeArea()
                }
            }
        }.ignoresSafeArea()
    }

With the above code we may three images but we don't see them and we also can not slide with them. To be able to tap and slide just add the below like

.tabViewStyle(PageTabViewStyle())

If you connect tabViewStyle() with TabView(), you would be to slide though. And to show sliding indicator or dots, add the below code

.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))

Let's see it in real picture

See the beautiful index or dots SwiftUI gives us automitically. But we can stop here, but how about adding a timer? So that it slides auto. 

To do this, at the top add the below code 

    public let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    @State private var selection = 0

For auto sliding we need to use OnReceiver() and withAnimation() function. OnReceiver() takes a timer object(this is a publisher) and an animation function. In our case withAnimation() is the animation function. It will change the value of selection every three seconds later and we will see we are auto sliding.

import SwiftUI

struct ContentView:View{
    var body:some View{
        SliderView()
    }
}

struct HeadView:View{
    var body:some View{
        HStack(alignment: .top){
            VStack(alignment: .leading){
                Text("Hello Dbestech").font(.largeTitle)
                Text("Good morning")
            }
            Spacer()
            Image(systemName: "person")
            
        }.padding()
    }
}

struct SliderView: View {
    public let timer = Timer.publish(every: 3, on: .main, in: .common).autoconnect()
    @State private var selection = 0
    
    ///  images with these names are placed  in my assets
    let images = ["welcome-one","welcome-two","welcome-three"]
    
    var body: some View {
        
        ZStack{
            
            Color.black
            
            TabView(selection : $selection){
                
                ForEach(0..<3){ i in
                    Image("\(images[i])").resizable()
                        .frame(width: .infinity
                        )
                        
                        .ignoresSafeArea()
                }
                
            }.tabViewStyle(PageTabViewStyle())
            
            .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            .onReceive(timer, perform: { _ in
                    
                withAnimation{
                    print("selection is",selection)
                    selection = selection < 3 ? selection + 1 : 0
                }
            })
        }.ignoresSafeArea()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Comment