> For the complete documentation index, see [llms.txt](https://docs.acpt.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.acpt.io/meta-fields/field-types/image-slider-field.md).

# Image Slider field

The Image Slider field type

The Image Slider field stores exactly two images — a **left** and a **right** image — and renders them on the front end as a draggable before/after comparison slider.

<figure><img src="https://3235524095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fiyf0tSKPgXiyoQ3zV3I6%2Fuploads%2Fgit-blob-cc9f68d3b514aad8f5ee262e6be5ceb592ffa167%2Fimageslider-field-demo.png?alt=media" alt=""><figcaption><p>The Image Slider field: Left/Right image slots in the meta box, and the resulting comparison slider.</p></figcaption></figure>

At the data level it's stored the same way as the [Gallery field](/meta-fields/field-types/gallery-field.md) — an array of attachment URLs — but with exactly two elements: index `0` is the left image, index `1` is the right image.

### Adding images

Click **Upload** under **Left image** and **Right image** to open the WordPress media manager and choose one image for each slot.

### Displaying the slider

Use the standard ACPT display functions or shortcodes. The field returns an array of image URLs.

#### Shortcode

```
[acpt box="box_name" field="slider_field"]
```

#### PHP

```php
$slides = get_acpt_field([
    'post_id'    => get_the_ID(),
    'box_name'   => 'box_name',
    'field_name' => 'slider_field',
]);

foreach ($slides as $src) {
    echo '<img src="' . esc_url($src) . '" />';
}
```

#### Accessing a single image by index

In page-builder integrations that support index-based access (e.g. Bricks Builder), you can target a specific image:

```
{acpt_slider_field:0}   // left image
{acpt_slider_field:1}   // right image
```

The index is zero-based.

{% hint style="info" %}
The Image Slider field is also supported in Gutenberg (Basic fields block), Elementor, Bricks Builder, and Divi dynamic tags. Refer to the relevant integration page for builder-specific usage.
{% endhint %}