# SwiperNode

Carousel/slider container dùng Embla Carousel. Chỉ chấp nhận `SwiperSlideNode` children.

## Resolved name

`Swiper` (displayName: `Carousel`)

## Configurable props

### Top-level props

| Prop | Type | Description |
| --- | --- | --- |
| `slidesPerView` | `number \| 'auto'` | Số slides hiển thị cùng lúc |
| `spaceBetween` | `number` | Khoảng cách giữa các slides (px) |
| `autoplayOptions.active` | `boolean` | Bật autoplay |
| `autoplayOptions.delay` | `number` | Delay giữa các lần chuyển slide (ms) |
| `autoplayOptions.stopOnLastSnap` | `boolean` | `false` = loop, `true` = dừng ở slide cuối |

`slidesPerView` và `spaceBetween` hỗ trợ responsive.

### `sx` props

```ts
sx?: {
  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // background
  backgroundColor?: string
  backgroundImage?: string
  backgroundPosition?: string
  backgroundRepeat?: string
  backgroundSize?: string
  backgroundAttachment?: string
  background?: string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { SwiperNode, SwiperSlideNode } from '@janbox/storefront-builder';

// 3 slides hiển thị, autoplay với loop
<SwiperNode
  slidesPerView={3}
  spaceBetween={16}
  autoplayOptions={{
    active: true,
    delay: 3000,
    stopOnLastSnap: false, // loop
  }}
>
  <SwiperSlideNode>Slide 1</SwiperSlideNode>
  <SwiperSlideNode>Slide 2</SwiperSlideNode>
  <SwiperSlideNode>Slide 3</SwiperSlideNode>
</SwiperNode>

// Responsive: 1 slide mobile, 3 slides desktop
<SwiperNode
  slidesPerView={1}
  spaceBetween={8}
  md={{ slidesPerView: 3, spaceBetween: 24 }}
  sx={{
    paddingTop: 16,
    paddingBottom: 16,
  }}
>
  <SwiperSlideNode>...</SwiperSlideNode>
  <SwiperSlideNode>...</SwiperSlideNode>
  <SwiperSlideNode>...</SwiperSlideNode>
</SwiperNode>
```

## Rules

- **Canvas**: yes — chứa `SwiperSlideNode` children.
- **canMoveIn**: chỉ chấp nhận `SwiperSlideNode`.

## Related nodes

- [`SwiperSlideNode`](../swiper-slide/README.md) — mỗi slide item