360° Exterior Viewer
Overview
The Exterior Viewer
component displays an interactive 360° view of a vehicle's exterior. It provides navigation controls for rotating the vehicle, autoplay functionality, and fullscreen viewing, allowing users to examine the exterior of a vehicle from all angles.
Installation
The component is part of the Carpose application and requires no separate installation.
Usage
To use the Exterior Viewer component in a standard HTML page:
<div
data-carpose-component="exterior-viewer"
data-api-key="your-api-key"
data-identifier="your-identifier"
data-car-id="your-car-id"
></div>
Configuration Attributes
The component reads configuration from data attributes on the provided element:
data-carpose-component
string
-
Identifies the component type, must be set to "exterior-viewer"
data-api-key
string
-
API key for authentication with the Carpose backend services. Required for data fetching.
data-identifier
string
-
Identifier for the exterior images. Required if car-id is not provided.
data-car-id
string
-
ID of the car to display exterior view for. Required if identifier is not provided.
Features
Interactive 360° view of vehicle exteriors
Navigation controls for:
Rotating left and right
Autoplay with play/pause functionality
Fullscreen viewing (on non-mobile devices)
Loading indicator while images are being fetched
Fallback screen when no exterior images are available
Overlay with usage hints
Event notifications when viewer loads successfully or encounters errors
Example
<!-- Using identifier -->
<div
data-carpose-component="exterior-viewer"
data-api-key="your-api-key"
data-identifier="vehicle-exterior-123"
></div>
<!-- Using car ID -->
<div
data-carpose-component="exterior-viewer"
data-api-key="your-api-key"
data-car-id="550e8400-e29b-41d4-a716-446655440000"
></div>
Behavior
Data Loading:
On initialization, the component fetches the exterior images from the API using either the provided identifier or car ID.
A loading screen is displayed while the images are being loaded.
If no images are available, a message is displayed indicating that no 360° exterior view is available.
The component triggers custom events to notify parent components of successful loading or errors.
Navigation Controls:
Left/right arrow buttons allow rotating the vehicle view
Play/pause button toggles automatic rotation
Fullscreen button toggles fullscreen mode (not available on mobile devices)
Users can also navigate by dragging the view with their mouse or touch gestures
Responsive Behavior:
The component adapts to the container size
Controls are accessible on both desktop and mobile devices
Fullscreen option is automatically disabled on mobile devices
Events:
carpose-de-exterior-viewer-loaded
: Triggered when the viewer loads successfullycarpose-de-exterior-no-viewer-available
: Triggered when no exterior images are available
Integration with Other Components
The Exterior Viewer component is typically used in conjunction with the Car Detail view to provide an immersive experience of the vehicle's exterior. It complements the Interior Viewer component, which provides a similar experience for the vehicle's interior.
Last updated