Image slider

Question

Gharfield OP

Created Jun ’21

Replies 1

Boosts 0

Views 1.5k

Participants 1

Hi!

https://www.dropbox.com/s/40w8l22bjnul15g/SLIDER.MOV?dl=0

Soo i have a few problems…

First: i want the slider to ignore the safe area on top, .edgesignorningsafearea(.top) doesn’t work since there is a frame to it. How can i make it go over the safe area?

Second: How can i customize my slider icons. I want them to be lines instead of dots and to be located to the left instead in the middle.

Third: As you can see in the video i also can’t drag the picture from the 3rd picture to the first to start the cycle over again. I can’t even drag from 1st back to 3rd. How can i manage this?

Fourth: I also want the ImageSlider to stop the timer once the user holds a picture (so if i hold picture one it will stay there and not go to picture two, and makes it unstable) Thanks for the help.

Answered by Gharfield in 679026022

import SwiftUI
 
struct Tab1: View {
private var numberOfImages = 3
private let timer = Timer.publish(every: 10, on: .main, in: .common) .autoconnect() 

@State private var currentIndex = 0
var body: some View {
       
 GeometryReader { proxy in        
        TabView(selection:$currentIndex) {
        ForEach(0..<numberOfImages) {num in
            Image("\(num)")
             .resizable()
             .scaledToFill()
             .overlay(Color.black.opacity(0.4))
             .tag(num) 
       }
       }.tabViewStyle(PageTabViewStyle())            
         .clipShape(RoundedRectangle(cornerRadius: 10)) 
         .frame(width: proxy.size.width, height: proxy.size.height/ 3)
         .onReceive(timer, perform: { _ in
                withAnimation {
                currentIndex = currentIndex < 
                numberOfImages ? currentIndex + 1 : 0
                }
            })
        }
     }
}

struct Tab1_Previews: PreviewProvider {
    static var previews: some View {
        Tab1()
    }
}

Boost

Answer 1

Gharfield OP

Jun ’21

Accepted Answer

import SwiftUI
 
struct Tab1: View {
private var numberOfImages = 3
private let timer = Timer.publish(every: 10, on: .main, in: .common) .autoconnect() 

@State private var currentIndex = 0
var body: some View {
       
 GeometryReader { proxy in        
        TabView(selection:$currentIndex) {
        ForEach(0..<numberOfImages) {num in
            Image("\(num)")
             .resizable()
             .scaledToFill()
             .overlay(Color.black.opacity(0.4))
             .tag(num) 
       }
       }.tabViewStyle(PageTabViewStyle())            
         .clipShape(RoundedRectangle(cornerRadius: 10)) 
         .frame(width: proxy.size.width, height: proxy.size.height/ 3)
         .onReceive(timer, perform: { _ in
                withAnimation {
                currentIndex = currentIndex < 
                numberOfImages ? currentIndex + 1 : 0
                }
            })
        }
     }
}

struct Tab1_Previews: PreviewProvider {
    static var previews: some View {
        Tab1()
    }
}

0