# Carousel

Cara menambahkan Carousel component

Berikut langkah-langkah untuk menambahkan carousel *component*

* Buka Qore App Editor 

* Pada tab library, di section media pilih carousel *component*. Terdapat 2 cara untuk menambahkan *component* ke dalam emulator 

  * Jika ingin menambahkan *component* langsung ke suatu page, kamu dapat *double-click card* tersebut
  * Jika ingin menambahkan *component* ke dalam salah satu kontainer di page tersebut, kamu dapat *drag and drop* ke dalam kontainer yang diinginkan

  <figure><img src="/files/BNUJmd0XPIJpsop25Udq" alt=""><figcaption></figcaption></figure>

* Jika berhasil maka carousel *component* akan muncul di *emulator editor screen* seperti berikut&#x20;

<figure><img src="/files/ZIPzjvFfugRlOWxAYibz" alt=""><figcaption></figcaption></figure>

Properties dari carousel component adalah&#x20;

Data :

* Source : tabel pada qore data yang digunakan sebagai sumber data

Design :&#x20;

* Style : mengatur tampilan carousel, apakah full atau menggunakan frame
* Round corner : mengatur tampilan carousel, apakah sudut-sudutnya rounded
* Autoplay : mengatur animasi carousel, apakah sliding gambar dimainkan secara otomatis

All Device :

* All Device : jika gambar ingin ditampilkan di semua tipe device dengan sumber gambar yang sama, maka aktifkan toggle
* Images : sumber gambar, berupa baris data pada tabel qore data

Phone :

* Images : sumber gambar yang ditampilkan jika device adalah phone, berupa baris dalam tabel qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah phone, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device phone, apakah fill ataupun fit&#x20;

Tablet :

* Images : sumber gambar yang ditampilkan jika device adalah tablet, berupa baris dalam tabel qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah tablet, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device tablet, apakah fill ataupun fit&#x20;

Dekstop :

* Images : sumber gambar yang ditampilkan jika device adalah dekstop, berupa baris dalam tabel qore data
* Ratio : ratio ukuran gambar yang ditampilkan jika device adalah dekstop, dapat berupa 1:1, 16:9, 4:3, ataupun 3:1
* Fit image : mengatur tampilan image pada device dekstop, apakah fill ataupun fit&#x20;

Berikut contoh carousel yang telah dimodifikasi

<figure><img src="/files/erzYMjVSPxGAQDWdYKdZ" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.qore.dev/component/media/carousel.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.