Criar Carrossel de forma dinâmica

6 min

Exemplo de Carrossel

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

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:

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

$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:

const { effect } = $lib.Signals;

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

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:

const { effect } = $lib.Signals;

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

const { effect } = $lib.Signals;

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