---
title: Slider'a görsel listesini bağlama
description: Ürün slider'ına görsel listesini bağlama.
---

<Video src="/media/ikas-studio/basic-examples/product-detail/binding-image-list-to-slider.mp4" autoPlay muted loop controls />

## Mevcut elementleri temizleme

**Tasarım** moduna geçerek **Ürün Detay** bölümünün detayına girin. Slider element'i içinde bulunan Slider element'inin içerisindeki çerçeveleri silin.

## Veri bağlama

Bu kırılımdaki slider element'ine sağ tıklayarak **Veri Bağla** kısmından `product` > `getSelectedVariant` > `images` verisini seçin. Açılan modalda **List Component Name** alanına `ProductImageList` yazın ve **Kaydet**'e basın.

## Item stillerini güncelleme

Oluşan listeye çift tıklayarak detayına girin. İlk element'i seçerek aşağıdaki stil özelliklerini güncelleyin:

- `flex-grow`
- `flex-shrink`
- `flex-basis`
- `flex-direction`
- `width`
- `aspect-ratio`
- `scroll-snap-align`

## Görsel ekleme ve veri bağlama

**Elementler** kısmından bir **Görsel** element'i ekleyin ve `width` stilini güncelleyin. Ardından **İçerik** alanına tıklayarak açılan menüden **Veri Bağla** seçeneğinden `productImageListItem` > `image` verisini bağlayın.

## Önizleme

**İçerik** moduna geçerek slider'ınızın nasıl göründüğünü inceleyebilirsiniz.