V2 - Paginação de Conteúdos para Elementor.js

/*
PAGINAÇÃO DE CONTEÚDO

Siga as intruções abaixo:
Crie containers com a class = .pg-conteudo
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 divs = $('.pg-conteudo');
    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 === divs.length - 1) {
        $('#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 todas as divs com a classe .pg-conteudo, exceto a primeira
    divs.hide().eq(0).show();

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

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

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


</script>