layout/DSCardCarousel

DSCardCarousel

layout
since 1.2.0

Horizontal scrolling carousel of cards with spacing and peek effect.

iOSmacOS

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

PropTypeDefaultDescription
cardsreq[CardContent]—Array of card content
cardWidthCGFloat280Width of each card
spacingCGFloatDSSpacing.mdSpace between cards

Examples

Featured products

Carousel of product cards.

swift
DSCardCarousel(
    cards: featuredProducts.map { product in
        CardContent(
            title: product.name,
            subtitle: product.price,
            image: product.image
        )
    },
    cardWidth: 300
)

Usage Guidelines

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

Related Components

ImageGalleryCard