V1 - 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;

    // Função para ocultar ou mostrar os botões com base no índice atual
    function atualizarBotoes() {
      if (currentIndex === 0) {
        $('#anterior').hide();
      } else {
        $('#anterior').show();
      }

      if (currentIndex === divs.length - 1) {
        $('#proximo').hide();
      } else {
        $('#proximo').show();
      }
    }

    // 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>