Uso de Link ID no Slide / Elementor

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 5 anos atrás por Mário Valney. Razão: Resposta alterada com mais detalhes

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.

Show de bola!

Fico feliz que retornou e que deu certo.

Abraços