# ParallaxSlider

Horizontal image carousel with parallax slide animation and dot pagination.

Migrated from yagami (`@aldenui/components` / `core/components/ParallaxSlider`). Full parallax + edge-pan gesture behavior is React Native only; the web build is an API-compatible stub without gesture-driven parallax.

---

## Installation

```bash
npm install @cleartrip/ct-design-parallax-slider
# or via the aggregator
npm install @cleartrip/ct-design-components
```

### Peer dependencies (React Native)

```bash
npm install react-native react-native-reanimated react-native-gesture-handler
```

---

## Usage

```tsx
import { ParallaxSlider, SlideImage } from '@cleartrip/ct-design-components';
// or: import { ParallaxSlider, SlideImage } from '@cleartrip/ct-design-parallax-slider';

function Gallery({ images }: { images: { url: string }[] }) {
  const slideWidth = 320;
  const wrapperHeight = 200;

  return (
    <ParallaxSlider
      data={images}
      slideWidth={slideWidth}
      wrapperHeight={wrapperHeight}
      showDots
      renderItem={({ item, animationValue }) => (
        <SlideImage animationValue={animationValue} slideWidth={slideWidth}>
          <img src={item.url} alt='' width={slideWidth} height={wrapperHeight} />
        </SlideImage>
      )}
    />
  );
}
```

---

## Props

### `ParallaxSlider`

| Prop              | Type                                              | Default       | Description                                |
| ----------------- | ------------------------------------------------- | ------------- | ------------------------------------------ |
| `data`            | `T[]`                                             | —             | Slide data                                 |
| `slideWidth`      | `number`                                          | —             | Slide / viewport width                     |
| `wrapperHeight`   | `number`                                          | —             | Slide / viewport height                    |
| `renderItem`      | `(info: TParallaxRenderItemInfo<T>) => ReactNode` | —             | Receives `{ item, index, animationValue }` |
| `startIndex`      | `number`                                          | `0`           | Initial slide                              |
| `showDots`        | `boolean`                                         | `true`        | Show pagination dots                       |
| `maxDotsToShow`   | `number`                                          | `data.length` | Cap on rendered dots                       |
| `styleConfig`     | `TParallaxSliderStyleConfig`                      | —             | Style slots for root / dots                |
| `customIcon`      | `ComponentType`                                   | —             | Optional icon for a specific dot           |
| `customIconIndex` | `number`                                          | —             | Index that uses `customIcon`               |
| `onSlide`         | `(index: number) => void`                         | —             | Fires on snap                              |

### `SlideImage`

| Prop             | Type                      | Description                      |
| ---------------- | ------------------------- | -------------------------------- |
| `animationValue` | `TCarouselAnimationValue` | From `renderItem`                |
| `slideWidth`     | `number`                  | Same as carousel `slideWidth`    |
| `children`       | `ReactNode`               | Slide content (usually an image) |