# Slider

{% code lineNumbers="true" fullWidth="false" %}

```html
<div id="carpose-image-slider" data-offer-number="carpose-de"></div>
```

{% endcode %}

## HTML Attributes

The HTML snippet requires the `id` filled with the value `carpose-image-slider` to initialize the component. For the mapping between the car ad on your website and Carpose its mandatory to provide at least the `data-id` or `data-offer-number` field.

<table data-full-width="false"><thead><tr><th width="192">Data Attribute</th><th width="105">Type</th><th width="192">Example Value</th><th>Description</th></tr></thead><tbody><tr><td>id</td><td><code>string</code></td><td>carpose-image-slider</td><td>Required to initalize the component</td></tr><tr><td>data-id</td><td><code>int</code></td><td>46649</td><td>Internal ID of the Carpose </td></tr><tr><td>data-offer-number</td><td><code>string</code></td><td>carpose-de</td><td>External ID of an provider like Netconnection or CarZilla</td></tr></tbody></table>

## JavaScript Events

The component fires certain events for certain conditions to hook into the process.

| Event                       | Description                              |
| --------------------------- | ---------------------------------------- |
| carpose-image-slider-loaded | Successfully loaded the viewer           |
| carpose-image-slider-failed | Failed to load the viewer for any reason |

### Example

<pre class="language-javascript" data-line-numbers><code class="lang-javascript"><strong>var viewer = document.getElementById('carpose-image-slider');
</strong>
viewer.addEventListener('carpose-image-slider-loaded', function f() {
    // do whatever you want
});
</code></pre>

## CodePen

{% embed url="<https://codepen.io/carpose-de/pen/zYbbqOj>" fullWidth="false" %}