Criar Carrossel de forma dinâmica

Exemplo de Carrossel
Para fazer um carrossel de forma dinâmica será necessário do seguinte código em mount da tela principal:
﻿
JS
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'
        },

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:
﻿
JS
$exports = {
  run() {
    $state.$leads.next();
  }
};
$exports = {
  run() {
    $state.$leads.next();
  }
};
﻿
﻿
JS
$exports = {
  run() {
    $state.$leads.prev();
  },
};
$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:
﻿
﻿
JS
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?.isFirst || $state.$leads?.isFinished;
    });
  },
};
﻿
﻿
JS
const { effect } = $lib.Signals;

$exports = {
  init() {
    effect(() => {
      this.properties.disabled = $state.$leads?.isLast || $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:
﻿
﻿
JS
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?.id;
    })
  },
};
﻿
﻿
JS
const { effect } = $lib.Signals;

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

$exports = {
  init() {
    effect(() => {
      const { lead } = $state.$leads
      
      this.properties.value = lead?.leadName;
    })
  },
};
﻿
﻿
Did this page help you?
Ajustando Tela e Componentes
Estilização