Image Slider Viewer

Overview

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

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

Usage

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

<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

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

• 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

<!-- 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

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