Cómo solucionar el problema de que la configuración de sombra derecha no se muestre en el carrusel.

Acerca del problema de que la sombra derecha no se muestra

En algunos casos, cuando habilitas los efectos de sombra dentro de un elemento Carrusel, La sombra del lado derecho puede quedar oculta o recortada..

Esto sucede porque el contenedor Carousel a menudo utiliza:

sobrecarga oculta;

Esta configuración impide que el contenido se extienda fuera de los límites del contenedor. Como resultado:

• Sombras en el derecha Puede que no sea visible
• Los elementos cercanos al borde pueden aparecer recortados.
• Los efectos de diseño como el brillo o la profundidad pueden parecer defectuosos.

La solución consiste en actualizar la configuración de desbordamiento para permitir que las sombras se muestren correctamente.

Es posible que estés experimentando este problema si:

• La sombra izquierda se muestra normalmente
• Falta la sombra derecha o está parcialmente cortada.
• Aparecen sombras dentro del editor, pero no en la página en vivo.
• Los efectos de sombra desaparecen cuando se colocan cerca del borde de un carrusel.

Si se aplica alguna de estas situaciones, siga los pasos que se indican a continuación.

Cómo solucionar el problema de desbordamiento en el carrusel

Puedes solucionar este problema añadiendo una sencilla regla CSS personalizada a tu elemento Carrusel.

Paso 1: Abre tu página en el editor de GemPages.

Desde Panel de Control de GemPages, abre la página que contiene el carrusel donde se produce el problema de la sombra.

Localice la opción elemento Carrusel donde la sombra derecha no se muestra correctamente.

Paso 2: Encuentra el nombre de la clase del carrusel.

Haga clic con el botón derecho directamente en el elemento Carrusel.

Entonces:

• Seleccione Código Personalizado

• Se abrirá el panel CSS.
• Mira la primera línea: esta es tu clase Carrusel.

Copia este nombre de clase. Lo usarás en el siguiente paso.

Paso 3: Agregar código de desbordamiento personalizado

Pegue el siguiente código en el panel de Código personalizado:

Entonces:

Reemplazar:

#gp-carousel-clase-de-carrusel

Con:

Tu clase de carrusel.

Por ejemplo, si su clase Carousel es: .gp-carrusel-abc123

Tu código final debería verse así:

.gp-carousel-abc123 {

   desbordamiento: visible;

}

Después de agregar el código:

• Haga clic en Guardar
• Actualizar la vista previa
• Comprueba si ahora se ve la sombra correcta.