Como substituir os pontos do carrossel por botões de navegação (setas) usando código personalizado

Por padrão, o Navegação em carrossel no GemPages é exibido como indicadores de pontoEmbora os pontos funcionem bem em muitos casos, alguns usuários preferem usar botões de seta esquerda e direita Para facilitar a navegação e proporcionar uma experiência de usuário mais moderna.

Com um simples trecho de CSS personalizado, você pode reposicionar as setas de navegação e criar um layout mais limpo que substitui a navegação padrão em estilo de pontos. Este artigo irá guiá-lo passo a passo sobre como Substitua os pontos do carrossel por setas de navegação no GemPages. usando código personalizado.

Passo a passo: Como substituir os pontos do carrossel por botões de navegação

Siga estes passos cuidadosamente para aplicar o layout de seta de navegação.

Passo 1: Clique com o botão direito do mouse no elemento Carrossel.

Abra sua página no Editor de GemPages.

Então:

• Localize o Elemento carrossel
• Clique com o botão direito do mouse diretamente no carrossel.
• Selecionar Código personalizado

Isso abrirá o Painel de código CSS personalizado.

Passo 2: Copie a classe Carousel da primeira linha.

Dentro do painel Código Personalizado:

• Olhe para o primeira linha
• Você verá o Classe Carrossel

Copie o nome desta classe. Você a usará na próxima etapa.

Passo 3: Cole o código do botão de navegação

Cole o seguinte CSS no painel Código Personalizado:

.carouselID .gem-slider-previous {

 inferior: -40px !importante;

 topo: auto !importante;

 esquerda: calc(50% - 40px) !importante;

}

.carouselID .gem-slider-next {

 inferior: -40px !importante;

 topo: auto !importante;

 direita: calc(50% - 40px) !importante;

}

Então:

Substituir:

ID do carrossel

Com:

A sua classe Carousel real que você copiou na Etapa 2.

Depois disso:

• Clique Economize
• Atualize a pré-visualização.
• Verifique o layout de navegação

Passo 4: Clique em Salvar para aplicar as alterações.

Após terminar de colar o código:

• Clique Economize
• Atualize a pré-visualização da página, se necessário.

A navegação do seu carrossel agora deve exibir botões de seta posicionados abaixo do controle deslizante, tornando a navegação mais clara e fácil de usar.