Como ocultar as setas do carrossel usando código personalizado

As setas do carrossel ajudam os visitantes a navegar entre os slides dentro de um elemento de carrossel. No entanto, em alguns casos, você pode querer ocultar a seta da esquerda, a seta da direita ou ambas para criar uma experiência de design mais limpa.

Este artigo mostrará como ocultar as setas do carrossel no GemPages usando um código CSS personalizado simples, sem necessidade de experiência em programação.

Quando devo ocultar as setas do carrossel?

Aqui estão alguns casos de uso comuns em que ocultar as setas do carrossel pode melhorar o design da sua loja e a experiência do usuário:

1. Crie um layout para dispositivos móveis mais limpo

Em telas menores, as setas podem ocupar muito espaço ou sobrepor o conteúdo. Ocultá-las pode deixar o carrossel com uma aparência mais limpa e fácil de visualizar.

2. Use a reprodução automática em vez da navegação manual.

Se o seu carrossel deslizar automaticamente entre os itens, os visitantes podem não precisar de setas de navegação manuais.

3. Crie um design minimalista

Algumas marcas preferem um visual limpo e moderno, sem controles de navegação visíveis.

4. Impedir o deslizamento manual

Em algumas seções promocionais ou painéis de anúncios, você pode querer que os usuários visualizem o conteúdo em uma sequência fixa, sem precisar clicar nas setas.

5. Utilize métodos de navegação alternativos

Você já pode estar usando:

• Navegação por pontos
• Gestos de deslizar no celular
• Funcionalidade de rolagem automática

Nesses casos, as setas podem se tornar desnecessárias.

Como ocultar as setas do carrossel no GemPages

Passo 1: Selecione o elemento do carrossel

Dentro do editor GemPages, clique no elemento Carrossel que contém a seta que você deseja ocultar.

Passo 2: Abra o painel de código personalizado

Clique com o botão direito do mouse no elemento Carrossel e selecione Molduras por Medida.

O painel de Código Personalizado será exibido.

Passo 3: Adicione o código CSS personalizado

1. Oculte a seta para a esquerda.

Adicione o seguinte código no campo Código Personalizado:

.gTgcgeWuMC .gem-slider-previous{

 opacidade: 0! importante;

 visibilidade: oculto! Importante;

}

2. Ocultar a seta para a direita

Adicione este código para ocultar a seta para a direita:

.gTgcgeWuMC .gem-slider-after{

 opacidade: 0! importante;

 visibilidade: oculto! Importante;

}

Observação:

Substituir .gTgcgeWuMC com o ID real do seu elemento Carrossel.

Você pode encontrar o ID do elemento na parte superior do painel Código Personalizado.