> For the complete documentation index, see [llms.txt](https://docs.carpose.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.carpose.de/components/01_image-slider-viewer.md).

# Image Slider Viewer

### Overview <a href="#overview" id="overview"></a>

The `Image Slider` component displays a collection of images in an interactive carousel with thumbnail navigation and lightbox functionality. It provides a responsive and touch-friendly way to browse through multiple images of a vehicle or property.

### Installation <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the Image Slider component in a standard HTML page:

```html
<div 
  data-carpose-component="image-slider"
  data-api-key="your-api-key"
  data-images="image1.jpg,image2.jpg,image3.jpg"
  data-slides-per-view="4"
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                | Type   | Default | Description                                                                                     |
| ------------------------ | ------ | ------- | ----------------------------------------------------------------------------------------------- |
| `data-carpose-component` | string | -       | Identifies the component type, must be set to "image-slider"                                    |
| `data-api-key`           | string | -       | API key for authentication with the Carpose backend services if images are fetched dynamically. |
| `data-images`            | string | -       | Comma-separated list of image URLs to display in the slider.                                    |
| `data-slides-per-view`   | number | 4       | Number of thumbnail slides to display per view. Adjust based on available space.                |

### Features <a href="#features" id="features"></a>

* Main image carousel with navigation controls
* Thumbnail navigation below the main carousel
* Lightbox gallery for fullscreen image viewing
* Touch-friendly navigation for mobile devices
* Pagination indicator showing current slide position
* Responsive design that adapts to different screen sizes

### Example <a href="#example" id="example"></a>

```html
<!-- Basic implementation with direct image URLs -->
<div 
  data-carpose-component="image-slider"
  data-images="https://example.com/car1.jpg,https://example.com/car2.jpg,https://example.com/car3.jpg"
  data-slides-per-view="4"
></div>

<!-- Implementation with API key for dynamic image loading -->
<div 
  data-carpose-component="image-slider"
  data-api-key="your-api-key"
  data-vehicle-id="550e8400-e29b-41d4-a716-446655440000"
  data-slides-per-view="3"
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Image Display**:
   * The main carousel displays one image at a time with navigation arrows
   * Images can be navigated by swiping or using the navigation arrows
   * A pagination indicator shows the current position (e.g., "1/5")
2. **Thumbnail Navigation**:
   * Thumbnails are displayed below the main carousel
   * Clicking a thumbnail jumps directly to that image
   * The number of visible thumbnails is controlled by the `data-slides-per-view` attribute
3. **Lightbox Gallery**:
   * Clicking on the main image opens a fullscreen lightbox gallery
   * The lightbox allows for additional navigation and zoom functionality
   * Users can close the lightbox by clicking outside the image or using the close button
4. **Responsive Behavior**:
   * The component adapts to the container size
   * On smaller screens, the thumbnail view may show fewer thumbnails
   * Touch gestures are supported for navigation on mobile devices