create a slideshow with moving background

Question

So I'm working on an app and I have created a spalsh screen as below:

Image 1

So Image 1 is the look and feel I want but I would like to add an automatic carrousel to display the text as shown in Animation 1 below:

Animation 1:

For Image 1, I have done the code below:

var body: some View {
    GeometryReader { geometry in
        VStack {
           // Text("Hello, World!")
            Spacer().frame(maxWidth: .infinity)
            VStack {
                NavigationLink(destination: 
RegisterLoginView(isLoginScreen: true)) {
                    Spacer(minLength: 100)
                    MyButtonView(stringOfButton: login,
                        isInverse: true,
                        btnHeight: 40)
                        .padding(.leading, 10)
                    Spacer(minLength: 100)

                }
                
                NavigationLink(destination: 
 RegisterLoginView(isLoginScreen: false)) {
                    Spacer(minLength: 100)
                    MyButtonView(stringOfButton: register,
                        isInverse: false,
                        btnHeight: 40)
                        .padding(.leading, 10)
                    Spacer(minLength: 100)
                }
            }
        }
        .frame(maxHeight: .infinity)
    }
    .background(Image("guestBackground")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .edgesIgnoringSafeArea(.all))
}

As you see on the original image below, Image 1 only show the middle. So I would like to have Image 1 upgraded to :

text in the middle of each view of animation 1 showing on Image1 and automatically sliding from one to the other. Only 3 slides.
image right side for slide 1, middle of image on slide 2 and right side of image on slide 3. like when the text is displayed it looks like in background you are looking inside the appartment.

So it's look like you are moving in the image from left to right

Any idea?

Does this answer your question https://stackoverflow.com/a/62833840/12299030? — Asperi, Jun 05 '21 at 06:42
@Asperi not really because it's doing already what I am doing. I am looking for an automatic move and also a background image of each slide which 1/3 of an asset. slide one is left side of the image, slide 2 middle and slide 3 right. — Seb, Jun 05 '21 at 06:45

workingdog support Ukraine · Answer 1 · 2021-06-05T07:38:51.147

try the following approach for the carousel. It uses the tag() for the TabView and a Timer to automatically change them going from slide 1 to 3 and 3 to 1. As for the background image ...

struct ContentView: View {
    @State var slide = 1
    @State var forward = true
    
    var body: some View {
        NavigationView {
            VStack {
                TabView(selection: $slide) {
                    Text("--1--").tag(1)  
                    Text("--2--").tag(2)
                    Text("--3--").tag(3)
                }
                .tabViewStyle(PageTabViewStyle())
                .indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
            }
        }
        .onAppear {
            Timer.scheduledTimer(withTimeInterval: 3, repeats: true) { timer in
                if forward {
                    slide += 1
                    if slide == 3 { forward = false }
                } else {
                    slide -= 1
                    if slide == 1 { forward = true }
                }
            }
        }
    }
}

create a slideshow with moving background

1 Answers1