How to create a horizontal list with only one element shown at a time?

Question

The best way to explain what I'm trying to achieve is to show the picture bellow.

I would like to implement the horizontal sliding card list with animation as seen above. However I'm new to swiftUI and don't know where to even start so any help would be appreciated. The list will only have 4 elements which will contain a list within them instead of the content. Similar to the image bellow.

Answer 1

I think what you want is a horizontal ScrollView. Here is a basic implementation.

For more see Hacking with Swift

struct ContentView: View {
    
    let testData : [TestData] = [TestData(title: "Begginer"), TestData(title: "Medium"), TestData(title: "Hard")]
    
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 20) {
                ForEach(testData, id: \.self) { data in
                    Text("\(data.title)")
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .frame(width: 300, height: 600)
                        .background(Color(.darkGray))
                }
            }
        }
    }
}

struct TestData: Hashable {
    let title: String
}