post

Slide Horizontal com Contêiner do Elementor e JS Customizado

Publicado em: 02/07/2024 / Atualizado em: 02/07/2024

Categorias: Blog Elementor JavaScript (JS)JS Wordpress

Este código personalizado abaixo, ajuda a criar um slide horizontal navegável com os blocos do Elementor, sem a necessidade de plugins adicionais ou CPT. Essa solução se encaixa para poucos casos de uso. Em geral, vai preferir usar um plugin para isso, ou até mesmo a propriedade de “slide” do JetEngine, usando o Listing Grid.

Mas, em todo caso, sempre tem um caso de uso, e as vezes não faz sentido usar mais plugins ou configurações avançadas para isso.

Código:

<!-- Estilo CSS Opcional -->
<style>
#scroll-blocos:active {
  cursor: grabbing;
}
#scroll-blocos::-webkit-scrollbar {
  display: none;
}
#scroll-blocos {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
  const scrollableSection = document.getElementById('scroll-blocos'); // ID para o container
  const leftButton = document.querySelector('.left-button'); // ID para o botão esquerdo
  const rightButton = document.querySelector('.right-button'); // ID para o botão direito
  const itemWidth = document.querySelector('#scroll-blocos > div').offsetWidth + 24; // item width + margin

  // Controle Botão Esquerdo
  leftButton.addEventListener('click', () => {
    scrollableSection.scrollBy({
      left: -itemWidth,
      behavior: 'smooth'
    });
  });

  // Controle Botão Direito
  rightButton.addEventListener('click', () => {
    scrollableSection.scrollBy({
      left: itemWidth,
      behavior: 'smooth'
    });
  });

  // Controle Deslizante com o Mouse
  let isDown = false;
  let startX;
  let scrollLeft;

  scrollableSection.addEventListener('mousedown', (e) => {
    isDown = true;
    scrollableSection.classList.add('active');
    startX = e.pageX - scrollableSection.offsetLeft;
    scrollLeft = scrollableSection.scrollLeft;
  });

  scrollableSection.addEventListener('mouseleave', () => {
    isDown = false;
    scrollableSection.classList.remove('active');
  });

  scrollableSection.addEventListener('mouseup', () => {
    isDown = false;
    scrollableSection.classList.remove('active');
  });

  scrollableSection.addEventListener('mousemove', (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - scrollableSection.offsetLeft;
    const walk = (x - startX) * 2; // Velocidade
    scrollableSection.scrollLeft = scrollLeft - walk;
  });
});
</script>

Implementação:

1 – Primeiro você precisa adicionar um Contêiner principal, e dentro dele, adicionar os outros itens. Pode ser qualquer widget ou outro Contêiner.

2 – Ainda no Contêiner principal, adicione o ID scroll-blocos:

Recomendo também adicionar o z-index como 1, para que o Contêiner das setas não atrapalhe.

3 – Logo abaixo do nosso Contêiner principal, vamos criar um Contêiner para os botões:

4 – Na parte de “avançado” vamos ativar a “posição” como “absoluto“. Depois mover em “Desvio” até que os botões fiquem no centro do nosso slide. O valor do desvio vai de cada layout, você vai analisar como fica no seu. No meu, como tinha elementos no contêiner principal, precisei deixar como 480. Mas no seu, você vai analisar.