> 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/04_vehicle-slider.md).

# Vehicle Slider

{% hint style="info" %}
The Vehicle Slider displays a carousel of inventory vehicles, ordered randomly or by newest first.
{% endhint %}

## Introduction

The `vehicle-slider` component renders an interactive carousel of vehicles from your inventory. It is ideal for showcasing featured vehicles on landing pages or highlighting specific stock.

## Basic Usage

```html
<div
  data-carpose-component="vehicle-slider"
  data-api-key="your-api-key"
></div>
```

## Attributes

| Attribute                 | Required | Description                                                                                                         |
| ------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| `data-carpose-component`  | Yes      | Must be `vehicle-slider`                                                                                            |
| `data-api-key`            | Yes      | Your Carposé API key                                                                                                |
| `data-ordering`           | No       | Order of vehicles, `random` or `latest` (default `random`)                                                          |
| `data-search-url-forward` | No       | Search page a vehicle opens on when clicked. Overrides the `vehicleSearchMainPageUrl` setting for this slider only. |
| `data-primary-color`      | No       | Per-mount color override                                                                                            |
| `data-secondary-color`    | No       | Per-mount color override                                                                                            |
| `data-accent-color`       | No       | Per-mount color override                                                                                            |

The slider always shows up to 10 vehicles.

## Forwarding to a Search Page

The slider is meant for pages that carry no vehicle search of their own — a homepage, a landing page. Clicking a card there cannot open the vehicle in place, so the browser is sent to your search page with the vehicle deep-linked (`?vehicle=…`), which opens it directly.

That target is normally the **Vehicle Search Main Page URL** configured in your Carposé settings. `data-search-url-forward` overrides it for a single slider — useful when a landing page should lead into a specific search page rather than the default one.

```html
<!-- Cards open the vehicle on /fahrzeugsuche instead of the configured default -->
<div
  data-carpose-component="vehicle-slider"
  data-api-key="your-api-key"
  data-search-url-forward="/fahrzeugsuche"
></div>
```

The value may be absolute (`https://example.de/fahrzeugsuche`) or site-relative (`/fahrzeugsuche`); a relative path is resolved against the page the slider sits on. Only `http` and `https` targets are accepted — anything else is ignored, and the configured setting is used instead.

The attribute affects this slider's cards only. Other Carposé components on the same page keep following the configured setting.

## Behavior

* Fetches vehicles from your inventory based on the configuration
* Carousel with touch/swipe support and navigation arrows
* Responsive and lazy-loads images

## Notes

* Hidden if no vehicles match the criteria
* See also Vehicle Similarity Slider for "you may also like" carousels