> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pureclarity.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Carousel Model

> Model available for use in the Templates, and also returned by PureClarity in server-side requests

Model available for use in the Templates, and also returned by PureClarity in server-side requests

## Properties

<ParamField body="height" type="number">
  The height of the carousel
</ParamField>

<ParamField body="width" type="number">
  The width of the carousel
</ParamField>

<ParamField body="milliseconds" type="number">
  Milliseconds before auto scrolling, if active
</ParamField>

<ParamField body="autoscroll" type="boolean">
  Sets if autoscroll is on
</ParamField>

<ParamField body="isResponsive" type="boolean">
  Expands to width of container
</ParamField>

<ParamField body="isMaxWidth" type="boolean">
  If responsive, set’s if height and width is the max that the carousel should be
</ParamField>

<ParamField body="stopOnHover" type="boolean">
  If autoscroll is on, this sets if it should stop when mouse over
</ParamField>

<ParamField body="type" type="string">
  Set to carousel
</ParamField>

<ParamField body="html" type="string">
  \[Serverside mode only] The html rendered version based on the Template
</ParamField>

<ParamField body="images" type="array">
  Array containing Carousel Image objects
</ParamField>

### Carousel Image Properties

<ParamField body="images[].url" type="string">
  The location of the image file
</ParamField>

<ParamField body="images[].linkLocation" type="string">
  The link location of where a user should be taken if they click the image
</ParamField>

<ParamField body="images[].altText" type="string">
  The Alt Text attribute for the image
</ParamField>

<ParamField body="images[].showContent" type="boolean">
  Sets if text content should be shown
</ParamField>

<ParamField body="images[].content" type="string">
  The html content to overlay the image
</ParamField>

<ParamField body="images[].left" type="number">
  The left pixels for the content
</ParamField>

<ParamField body="images[].top" type="number">
  The top pixels for the content
</ParamField>

<ParamField body="images[].index" type="number">
  The index of the image in the array (zero based index)
</ParamField>

<ParamField body="images[].clickEvt" type="string">
  The JavaScript function to be executed on mouse down over the image element

  **Important:** This is required to track when users click through on a product. If this is omitted then reporting will be inaccurate
</ParamField>

## Example

```json theme={null}
{
  "height": 400,
  "width": 800,
  "milliseconds": 5000,
  "autoscroll": true,
  "isResponsive": true,
  "isMaxWidth": true,
  "stopOnHover": true,
  "type": "carousel",
  "html": "<div class='pc-carousel'>...</div>",
  "images": [
    {
      "url": "https://example.com/images/banner1.jpg",
      "linkLocation": "https://example.com/sale",
      "altText": "Summer Sale Banner",
      "showContent": true,
      "content": "<h2>Summer Sale - Up to 50% Off</h2>",
      "left": 50,
      "top": 100,
      "index": 0,
      "clickEvt": "_pc('track','click',{zoneid:'HP01',campaignid:'456'})"
    },
    {
      "url": "https://example.com/images/banner2.jpg",
      "linkLocation": "https://example.com/new-arrivals",
      "altText": "New Arrivals Banner",
      "showContent": false,
      "content": "",
      "left": 0,
      "top": 0,
      "index": 1,
      "clickEvt": "_pc('track','click',{zoneid:'HP01',campaignid:'457'})"
    }
  ]
}
```