Suporte » Plugins » Uso de Link ID no Slide / Elementor

  • Resolvido tecmdsp

    (@tecmdsp)


    Olá!

    Estou em um grande impasse. Preciso Linkar um slide na minha página.
    Em outras palavras, quando for clicado no icone “Postos de Gasolina” o slide avance até a guia que fala sobre “Postos de Gasolina”.
    De preferência, gostaria de fazer isso com o Elementor. Se houver algum plugin que possa fazer isso, também é bem-vindo.

    • Este tópico foi modificado 2 meses, 3 semanas atrás por Felipe Santos. Motivo: Movendo para "Plugins"

    A página que eu preciso de ajuda: [fazer login para ver o link]

Visualizando 5 respostas - 1 até 5 (de um total de 5)
  • Moderador Mário Valney

    (@mariovalney)

    WordPress Cleric of Fire

    Olá, tudo bem?

    Você pode adicionar um ID ou classe a um elemento.

    1. No Elementor, escolha o elemento e na tela da esquerda, clique em “Advanced”.

    2. Na seção “Advanced”, procure pela opção, segundo a imagem abaixo:

    Abraços,

    • Esta resposta foi modificada 2 meses, 3 semanas atrás por Mário Valney. Razão: Resposta alterada com mais detalhes

    Olá Mário!
    Tudo bem?
    Agradeço pela resposta!

    Mas antemão isso não vai me ajudar, pois esse recurso está disponível para a sessão do elementor e não para cada página do slide dentro do elementor… é o que procuro.
    Em outras palavras… quero clicar no icone acima e quando eu clicar, que apareça as informações abaixo ou então vá para a página do slide correspondente ao ícone que cliquei.

    Teria uma outra maneira de criar… uma página para cada um e adicionar o link em casa ícone correspondente, mas não é o que procuro. Quero que essas informações constem na página que os ícones estão dispostos (1) e as informações apareçam abaixo quando eu clicar (2). (Vide Imagem abaixo)
    Imagem

    Moderador Mário Valney

    (@mariovalney)

    WordPress Cleric of Fire

    Havia entendido que queria uma âncora para o slider, não para cada slide.

    Bem… para o seu caso, o slider precisa dar suporte a isso.
    A maioria dos plugins JS possuem, então provavelmente o seu plugin que cria slider também. Ou mesmo que não, não deve ser difícil.

    No seu caso, parece ser o Slick.
    A API dele usa o método: slickGoTo.
    Veja a documentação: https://kenwheeler.github.io/slick

    Então, por exemplo, para ir para o primeiro slide (lembrando que começa em 0), você só precisa disparar o seguinte código:

    jQuery('.slick-slider').slick('slickGoTo', 0);

    Digamos que você coloque o ID: “service-slider-section” para a seção do slider.
    Ficaria: jQuery('#service-slider-section .slick-slider').slick('slickGoTo', 0);

    Recomendo colocar um ID para garantir que vai mexer só nesse slider.

    Agora, você precisa criar o click.
    Não é difícil, vamos fazer assim:

    Passo 1: Coloque um link em cada botão. No formato: “#service-slider-99999”. Substitua 99999 pelo índice do slide (0 para o primeiro, 1 para o segundo, etc…).

    Passo 2: Adicione o seguinte código JavaScript no seu site:

    jQuery(document).ready(function($) {
        $('a[href^="#service-slider-"]').on('click', function(event) {
            event.preventDefault();
    
            var index = $(this).attr('href');
            index = index.substr(16);
            index = parseInt(index);
    
            if (isNaN(index)) {
                return;
            }
    
            jQuery('#service-slider-section .slick-slider').slick('slickGoTo', index);
        });
    });

    Basicamente, ele está fazendo todo link que começa em “#service-slider-” mudar o slide para o índice que vem depois disso. Por isso, pedi o passo 1.

    Também estou assumindo que colocou o ID service-slider-section na seção do slider.

    Não testei, mas deve funcionar.
    Fico no aguardo de saber se funcionou.

    Amigo @mariovalney , desculpe a Demora para responder. Voltei Aqui para lhe agradecer! Deu Certo!

    Moderador Mário Valney

    (@mariovalney)

    WordPress Cleric of Fire

    Show de bola!

    Fico feliz que retornou e que deu certo.

    Abraços

Visualizando 5 respostas - 1 até 5 (de um total de 5)
  • Você deve estar conectado para responder a este tópico.