Como corrigir o problema da configuração de sombra à direita que não está sendo exibida no carrossel

Sobre o problema da sombra direita que não está sendo exibida

Em alguns casos, quando você ativa efeitos de sombra dentro de um Elemento carrossel, A sombra do lado direito pode estar oculta ou cortada..

Isso acontece porque o contêiner Carrossel costuma usar:

overflow: hidden;

Essa configuração impede que o conteúdo ultrapasse os limites do contêiner. Como resultado:

• Sombras sobre o lado direito pode não ser visível
• Elementos próximos à borda podem parecer cortados.
• Efeitos de design como brilho ou profundidade podem parecer quebrados.

A solução é atualizar a configuração de estouro para permitir que as sombras sejam exibidas corretamente.

Você pode estar enfrentando esse problema se:

• A sombra esquerda aparece normalmente
• A sombra da direita está ausente ou parcialmente cortada.
• As sombras aparecem dentro do editor, mas não na página publicada.
• Os efeitos de sombra desaparecem quando colocados perto da borda de um carrossel.

Se alguma dessas situações se aplicar a você, siga os passos abaixo.

Como corrigir a configuração de estouro no carrossel

Você pode corrigir esse problema adicionando uma regra CSS personalizada simples ao seu elemento Carrossel.

Passo 1: Abra sua página no editor GemPages

De você Painel GemPagesAbra a página que contém o carrossel onde ocorre o problema de sombra.

Localize o Elemento carrossel onde a sombra da direita não está sendo exibida corretamente.

Passo 2: Encontre o nome da classe do carrossel

Clique com o botão direito do mouse diretamente no Elemento carrossel.

Então:

• Selecionar Código personalizado

• O painel CSS será aberto.
• Observe a primeira linha — esta é a sua aula de Carrossel.

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

Passo 3: Adicionar código de estouro personalizado

Cole o seguinte código no painel Código Personalizado:

Então:

Substituir:

#gp-carousel-class-of-carousel

Com:

Sua aula de Carrossel de verdade.

Por exemplo, se a sua classe Carousel for: .gp-carousel-abc123

Seu código final deve ser semelhante a:

.gp-carousel-abc123 {

   estouro: visível;

}

Após adicionar o código:

• Clique Economize
• Atualize a pré-visualização.
• Verifique se a sombra correta agora está visível.