ImageSlider

An image carousel component with two modes: carousel navigation and comparison slider.

Basic Usage

import { ImageSlider } from "@corew500/ui"

const images = [
  { src: "/image1.jpg", alt: "Image 1" },
  { src: "/image2.jpg", alt: "Image 2" },
  { src: "/image3.jpg", alt: "Image 3" },
]

<ImageSlider images={images} />

Carousel Mode (Default)

Standard carousel with navigation arrows and indicators:

<ImageSlider
  images={images}
  mode="carousel"
  showControls
  showIndicators
/>

Comparison Mode

Draggable divider to compare two images:

<ImageSlider
  images={[
    { src: "/before.jpg", alt: "Before" },
    { src: "/after.jpg", alt: "After" },
  ]}
  mode="comparison"
/>

Auto Play

<ImageSlider
  images={images}
  autoPlay
  interval={5000} // 5 seconds
/>

Without Controls

<ImageSlider
  images={images}
  showControls={false}
  showIndicators={false}
/>

Custom Overlay Content

<ImageSlider
  images={images}
  overlay={(image, index) => (
    <div className="absolute bottom-4 left-4">
      <h3 className="text-white font-bold">{image.alt}</h3>
    </div>
  )}
/>

Props

Prop	Type	Default	Description
`images*`	SliderImage[]	—	Array of images to display
`mode`	enum	`carousel`	Slider mode: carousel or comparison
`autoPlay`	enum	`false`	Enable auto-play in carousel mode
`interval`	number	`5000`	Auto-play interval in milliseconds
`showControls`	enum	`true`	Show navigation controls
`showIndicators`	enum	`true`	Show indicator dots
`onSlideChange`	(index: number) => void	—	Callback when slide changes
`defaultIndex`	number	`0`	Initial slide index
`variant`	enum	`default`	—
`aspectRatio`	enum	`16/9`	—

Design Tokens

| Token | Description | |-------|-------------| | --image-slider-overlay-bg | Overlay background color | | --image-slider-handle-size | Comparison handle size | | --image-slider-indicator-size | Dot indicator size |

Accessibility

Arrow buttons have aria-label for screen readers
Images require alt text
Keyboard navigation with arrow keys
Touch/swipe support on mobile