Vehicle Similarity Slider

The Vehicle Similarity Slider shows vehicles similar to a given vehicle — a "you may also like" carousel.

Introduction

The vehicle-similarity-slider component fetches vehicles similar to a reference vehicle (based on its specifications) and renders them in a responsive Swiper carousel with bullet pagination.

Basic Usage

<div
  data-carpose-component="vehicle-similarity-slider"
  data-api-key="your-api-key"
  data-id="your-vehicle-id"
></div>

Attributes

Attribute
Required
Description

data-carpose-component

Yes

Must be vehicle-similarity-slider

data-api-key

Yes

API key for authentication with the Carposé backend services

data-id

Yes

ID of the reference vehicle to find similar vehicles for

Behavior

  • Fetches similar vehicles from the API (fetchVehicleSimilarity) based on the reference vehicle's specifications

  • Renders a Swiper carousel with bullet pagination — 3 slides per view on desktop, 1 on mobile

  • Each card links to the corresponding vehicle detail page

Notes

  • Requires a valid data-id; nothing is shown if there are no similar vehicles

  • Pairs well with a vehicle detail page

Last updated