# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carpose.de/components/image-slider-viewer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.