https://juejin.cn/post/7090725181206822942

//
//  SwiftUIView.swift
//  DemoApp
//
//  Created by TEEMO on 2024/10/29.
//
//            Image(systemName: "globe")
//                .imageScale(.large)
//                .foregroundStyle(.tint)
import SwiftUI
import Foundation
struct imageModel: Identifiable {
    var id = UUID()
    var image: String
    var imageName: String
}
let imageModels = [
    imageModel(image: "turtlerock", imageName: "Image - 1"),
    imageModel(image: "turtlerock", imageName: "Image - 2"),
    imageModel(image: "turtlerock", imageName: "Image - 3"),
    imageModel(image: "turtlerock", imageName: "Image - 4"),
    imageModel(image: "turtlerock", imageName: "Image - 5")
]
struct Banners: View {
    @State var currentIndex = 0
    @GestureState var dragOffset: CGFloat = 0
    var body: some View {
        GeometryReader { outerView in
            HStack(spacing: 0) {
                ForEach(imageModels.indices, id: \.self) { index in
                    GeometryReader { innerView in
                        CardView(
                            image: imageModels[index].image,
                            imageName: imageModels[index].imageName
                        )
                        
                    }
                    .padding(.horizontal)
                    .frame(
                        width: outerView.size.width,
                        height: outerView.size.height
                    )
                    
                }
                .padding(.horizontal, 20)
                .frame(
                    width: outerView.size.width,
                    height: outerView.size.height
                )
            }
            .frame(
                width: outerView.size.width,
                height: outerView.size.height,
                alignment: .leading
            )
            .offset(
                x: -CGFloat(self.currentIndex) * outerView.size.width
            )
            .offset(x: self.dragOffset)
            .gesture(
                DragGesture()
                    .updating(
                        self.$dragOffset,
                        body: { value, state, transaction in
                            state = value.translation.width
                        }
                    )
                    .onEnded({ value in
                        let threshold = outerView.size.width * 0.65
                        var newIndex = Int(-value.translation.width / threshold)+self.currentIndex
                        newIndex = min(max(newIndex, 0), imageModels.count - 1)
                        self.currentIndex = newIndex
                    })
            )
        }
    }
}
struct CardView: View {
    let image: String
    let imageName: String
    
    var body: some View {
        ZStack {
            GeometryReader { geometry in
                Image(image)
                    .resizable()
                    .scaledToFill()
                    .frame(width: geometry.size.width, height: geometry.size.height)
                    .cornerRadius(15)
                    .overlay(
                        Text(imageName)
                            .font(.system(.headline, design: .rounded))
                            .fontWeight(.heavy)
                            .padding(10)
                            .background(Color.white)
                            .padding([.bottom, .leading])
                            .opacity(1)
                            .frame(
                                minWidth: 0,
                                maxWidth: .infinity,
                                minHeight: 0,
                                maxHeight: .infinity,
                                alignment: .bottomLeading
                            )
                    )
            }
        }
    }
}
#Preview {
    Banners()
}