post #5580
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:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=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.