layout/DSCardCarousel

DSCardCarousel

layout

since 0.1.0

Horizontal scrolling carousel of cards with spacing and peek effect.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Use to showcase featured content, products, or cards in a swipeable horizontal layout with visible peek of next card.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

Prop	Type	Default	Description
itemCountreq	Int	—	Number of cards.
spacing	CGFloat	DSSpacing.md	Space between cards.
accessibilityLabel	String?	nil	VoiceOver label for the carousel.
contentreq	@ViewBuilder (Int) -> Content	—	Builds the card at each index. Set its width with .frame(width:).

Examples

Featured products

Horizontally scrolling product cards.

swift

DSCardCarousel(itemCount: featured.count) { index in
    let product = featured[index]
    DSCard {
        VStack(alignment: .leading, spacing: DSSpacing.xs) {
            DSText(product.name, style: .headline)
            DSText(product.price, style: .bodyMuted)
        }
    }
    .frame(width: 280)
}

Usage Guidelines

Use for 3-10 featured items
Cards should have consistent height
Peek effect encourages horizontal scrolling

Related Components

ImageGallery Card