post
Setas Customizadas Usando Função Slide Listing do JetEngine + JS
Publicado em: 01/08/2024 / Atualizado em: 01/08/2024
Caso queira usar botões customizados para controlar a rolagem dos itens no widget Listing do JetEngine, você pode criar isso usando os widgets de “Botão” do Elementor e adicionar um JavaScript personalizado.
Adicione 2 botões do Elementor em sua página, e adiciona uma class classButtonPrevCliente em um deles e uma class classButtonNextCliente no outro.
Depois disso, adicione o código JS abaixo dentro de um widget HTML do Elementor na sua página.
<script>
var customPrevButton = document.querySelector('.classButtonPrevCliente');
var customNextButton = document.querySelector('.classButtonNextCliente');
customPrevButton.addEventListener('click', function () {
var prevButtonSlideClientes = document.querySelector('.jet-listing-grid__slider-icon.prev-arrow');
prevButtonSlideClientes.click();
});
customNextButton.addEventListener('click', function () {
var nextButtonSlideClientes = document.querySelector('.jet-listing-grid__slider-icon.next-arrow');
nextButtonSlideClientes.click();
});
</script>OBS: Não se esqueça de habilitar a função “Slide” no widget “Listing”, e deixar as setas “ativas”.
Item Adicional
Caso queira, você pode ocultar as setas padrões do widget, com o CSS abaixo:
selector .slick-arrow {
display: none !important;
}Publicações recomendadas:
Inscreva-se em Nossa News:
Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.
Link Curto para Compartilhamento
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.
bruno.art.br/pb/5580
ID de Referência: 5580
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.