Offer Slider
Overview
The Offer Slider
component displays promotional offers from a specified offer group. It provides three display variants: a carousel slider (default), a tile grid using Ant Design Cards, or a vertical list layout.
Installation
The component is part of the Carpose application and requires no separate installation.
Usage
To use the Offer Slider component in a standard HTML page:
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 "offer-slider"
data-api-key
string
-
API key for authentication with the Carpose backend services. Required for data fetching.
data-offer-group-id
string
-
ID of the offer group to display. Required to fetch the specific collection of offers.
data-variant
string
"slider"
Display variant. Options: "slider", "tile", or "list"
Display Variants
Slider Variant (Default)
The default carousel view with navigation controls:
Displays one offer at a time with navigation arrows and pagination dots
Shows image on the left and content on the right on desktop
Stacks image above content on mobile
Tile Variant
A grid layout using Ant Design Card components:
Displays offers in a responsive grid (2 columns on desktop, 1 on mobile)
Each offer is shown in a card with the image at the top
Includes all offer details in a compact format
List Variant
A vertical list of offers:
Displays offers in a vertical stacked list
Each offer shows image on the left and content on the right on desktop
Stacks image above content on mobile
Features
Multiple display variants (slider, tile, list)
Responsive layout that adapts to different screen sizes
Navigation controls for slider variant
For each offer displays:
Headline and subheadline
Offer image
Details list
Condition information
Link to the full offer page
Examples
Default Slider Variant
Tile Variant
List Variant
Behavior
Data Loading:
On initialization, the component fetches offer group data from the API using the provided offer group ID and API key.
The component loads all offers associated with the specified offer group.
Display Variant:
The component renders according to the specified variant (slider, tile, or list).
If no variant is specified, it defaults to the slider view.
Slider Navigation (Slider variant only):
Users can navigate between offers using the arrow buttons or pagination dots.
The slider transitions smoothly between offers.
Offer Display:
Each offer is displayed with its headline, subheadline, and image.
Detailed information is shown in a list format.
Each offer includes a link to view the full offer details.
If available, image captions and consumption text are displayed.
Images are displayed with consistent heights (350px for slider and list, adjustable for tiles).
Responsive Layout:
All variants are fully responsive and adapt to different screen sizes.
Layout adjusts automatically based on the device viewport.
Integration with Other Components
The Offer Slider component links to individual offer detail pages, allowing users to get comprehensive information about each promotion. This component is ideal for showcasing special financing deals, seasonal promotions, or featured vehicle offers on the homepage or landing pages.
Last updated