---
title: Criar Carrossel de forma dinâmica
slug: low-code/criar-carrossel-de-forma-dinamica
docTags: 
createdAt: 2024-03-08T12:40:26.812Z
---

# Exemplo de Carrossel

Para fazer um carrossel de forma dinâmica será necessário do seguinte código em mount da tela principal:

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/nXb0gnR_RXHK0VzGTK-D4_.blob)

```javascript
const { Signals, Utils, Toast } = $lib;
const { deepSignal } = Signals;

// funcao utilizada para exemplo de resposta esperada da requisicao
function getleads() {

    return [
        {
            id: 12848,
            winRate: '30%',
            createdAt: '09/06/2023',
            leadName: 'Nome de lead com exemplo grande para ...',
            expectedValue: 100000000.00,
            badgeColor: '#BA6200'
        },

```

Com o código pronto podemos passar para a utilização em cada caso, para se mover entre o array na ação de click de um botão ou elemento qualquer deve-se ter o seguinte código mostrado abaixo, para próximo e anterior respectivamente:

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/2E1mqH4cvg7OTObTQOSNx_.blob)

```javascript
$exports = {
  run() {
    $state.$leads.next();
  }
};
```

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/mSpsRopbG3wwW1jSgVx53_.blob)

```javascript
$exports = {
  run() {
    $state.$leads.prev();
  },
};
```

Para não haver erros de clicks infinitos também e necessário em mount desses mesmos elementos a acao de desabilitar o botão te que a informação chegue:

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/VUAJDyXw_CfXC7ImjdtPX_.blob)



```javascript
const { effect } = $lib.Signals;

$exports = {
  init() {
    effect(() => {
      this.properties.disabled = $state.$leads?.isFirst || $state.$leads?.isFinished;
    });
  },
};
```

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/3pSMmI74vjDngMPAZiioR_.blob)

```javascript
const { effect } = $lib.Signals;

$exports = {
  init() {
    effect(() => {
      this.properties.disabled = $state.$leads?.isLast || $state.$leads?.isFinished;
    });
  },
};
```

Com isso você já estará navegando entre as posições do array, agora para os dados serem mostrados você somente precisara da função effect e de chamar a função ( get lead ) como mostrado abaixo em cada elemento que precisar mostrar o valor, será mostrado dois exemplos:

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/NjBC787RPJEvkZnl_Uvd1_.blob)



```javascript
const { effect } = $lib.Signals;

$exports = {
  init() {
    effect(() => {
      const { lead } = $state.$leads
  
      this.properties.value = lead?.id;
    })
  },
};
```

![](https://api.archbee.com/api/optimize/pu5VMc-2TW3GQX4ly5Xp7/qEGrXT8mcXUtWOvHfZbi-_.blob)

```javascript
const { effect } = $lib.Signals;

$exports = {
  init() {
    effect(() => {
      const { lead } = $state.$leads
      
      this.properties.value = lead?.leadName;
    })
  },
};
```