Carousel

@MainActor
public struct Carousel<Content> : View where Content : View

Carousel is a container view that arranges its child views horizontally, one after the other, with a portion of the next child view visible in the container. It allows users to swipe or scroll through the child views to see different piece of content.

Carousel with numberOfColumns:

Carousel(numberOfColumns: 2, spacing: 8, alignment: .top, isSnapping: true) {
    ForEach(0..<16, id: \.self) { i in
        Text("Long long long Text \(i)")
            .font(.title)
            .padding()
            .background(Color.gray)
    }
}
.padding(8)
.border(Color.gray)

Carousel with fixed item width:

Carousel(itemWidth: 320, spacing: 8, alignment: .top, isSnapping: true) {
    ForEach(0..<16, id: \.self) { i in
       Text("Long long long long Text \(i)")
            .font(.title)
            .padding()
            .background(Color.gray)
    }
}
.padding(8)
.border(Color.gray)

To display a specific view as the initial visible item in the Carousel, use ScrollViewReader to programmatically scroll to the view identified by a unique id.

ScrollViewReader { proxy in
    Carousel(numberOfColumns: 2, spacing: 8, alignment: .top, isSnapping: true) {
        ForEach(0..<16, id: \.self) { i in
            Text("Long long long Text \(i)")
                .font(.title)
                .padding()
                .frame(height: 100)
                .background(Color.gray)
                .id(i) // set id for each view
        }
    }
    .onAppear {
        DispatchQueue.main.async {
            proxy.scrollTo(0, anchor: layoutDirection == .rightToLeft ? .trailing : .leading) // scroll to the view with your desisred id
        }
    }
}
.padding(8)
.border(Color.gray)


                      
                      
                      init(numberOfColumns:contentInsets:spacing:alignment:isSnapping:isSameHeight:content:)

Create a Carousel View with number of columns

Declaration

Swift

@MainActor
public init(numberOfColumns: Int = 1, contentInsets: EdgeInsets = EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16), spacing: CGFloat = 8, alignment: VerticalAlignment = .top, isSnapping: Bool = true, isSameHeight: Bool = false, @ViewBuilder content: @escaping () -> Content)

Parameters

`numberOfColumns`	Number of columns. The default is 1.
`contentInsets`	Padding inside of the Carousel View
`spacing`	Horizontal spacing between views. The default is 8.
`alignment`	Vertical alignment in the carousel. The default is `.top`.
`isSnapping`	Whether it stops at a right position that the first visible subview can be displayed fully after scrolling. The default is `true`.
`isSameHeight`	Whether all subviews have same height which is the maximum height of all subviews
`content`	The views representing the content of the Carousel


                      
                      
                      init(itemWidth:contentInsets:spacing:alignment:isSnapping:isSameHeight:content:)

Create a Carousel View with fixed item width

Declaration

Swift

@MainActor
public init(itemWidth: CGFloat, contentInsets: EdgeInsets = EdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 16), spacing: CGFloat = 8, alignment: VerticalAlignment = .top, isSnapping: Bool = true, isSameHeight: Bool = false, @ViewBuilder content: @escaping () -> Content)

Parameters

`itemWidth`	Width of each item
`contentInsets`	Padding inside of the Carousel View
`spacing`	Horizontal spacing between views. The default is 8.
`alignment`	Vertical alignment in the carousel. The default is `.top`.
`isSnapping`	Whether it stops at a right position that the first visible subview can be displayed fully after scrolling. The default is `true`.
`isSameHeight`	Whether all subviews have same height which is the maximum height of all subviews
`content`	The views representing the content of the Carousel


                      
                      
                      body

Declaration

Swift

@MainActor
public var body: some View { get }