Paginação de Listing Grid.js

/*
PAGINAÇÃO DE LISTING GRID

Siga as intruções abaixo:

Adicione o ID:  #lista em seu listing grid do JetEngine
Crie 1 botão com ID = #anterior
Crie 1 botão com ID = #proximo

vídeo de instruções
*/

<script>
jQuery(document).ready(function($) {
  // Verifica se não estamos na página de edição do Elementor Pro
  if (!$('.elementor-editor-active').length) {
    var itens = $('#lista .jet-listing-grid__item');  // Modificado
    var currentIndex = 0;

    // Armazena os estilos originais dos botões
    var estiloOriginalAnterior = {
      'background-color': $('#anterior').css('background-color'),
      'color': $('#anterior').css('color'),
      'fill': $('#anterior').css('color'),
      'cursor': $('#anterior').css('cursor')
    };

    var estiloOriginalProximo = {
      'background-color': $('#proximo').css('background-color'),
      'color': $('#proximo').css('color'),
      'fill': $('#proximo').css('color'),
      'cursor': $('#proximo').css('cursor')
    };

    // Função para atualizar a aparência dos botões com base no índice atual
    function atualizarBotoes() {
      if (currentIndex === 0) {
        $('#anterior')
          .addClass('inativo')
          .css({
            'background-color': '#ccc',
            'color': '#666',
            'fill': '#666',
            'cursor': 'not-allowed'
          })
          .prop('disabled', true);
      } else {
        $('#anterior')
          .removeClass('inativo')
          .css(estiloOriginalAnterior) // Restaura os estilos originais
          .prop('disabled', false);
      }

      if (currentIndex === itens.length - 1) {  // Modificado
        $('#proximo')
          .addClass('inativo')
          .css({
            'background-color': '#ccc',
            'color': '#666',
            'fill': '#666',
            'cursor': 'not-allowed'
          })
          .prop('disabled', true);
      } else {
        $('#proximo')
          .removeClass('inativo')
          .css(estiloOriginalProximo) // Restaura os estilos originais
          .prop('disabled', false);
      }
    }

    // Inicialmente, esconde todos os itens com a classe .jet-listing-grid__item, exceto o primeiro
    itens.hide().eq(0).show();  // Modificado

    // Manipula o clique no botão "Anterior"
    $('#anterior').on('click', function() {
      if (currentIndex > 0) {
        itens.eq(currentIndex).hide();  // Modificado
        currentIndex--;
        itens.eq(currentIndex).show();  // Modificado
        atualizarBotoes();
      }
    });

    // Manipula o clique no botão "Próximo"
    $('#proximo').on('click', function() {
      if (currentIndex < itens.length - 1) {  // Modificado
        itens.eq(currentIndex).hide();  // Modificado
        currentIndex++;
        itens.eq(currentIndex).show();  // Modificado
        atualizarBotoes();
      }
    });

    // Inicializa o estado inicial dos botões
    atualizarBotoes();
  }
});
</script>