Cómo Ocultar las Flechas del Carrusel Mediante Código Personalizado

Los elementos de navegación del Carrusel ayudan a los visitantes a desplazarse entre diapositivas. Sin embargo, en algunos casos, es posible que desee ocultar la flecha izquierda, la flecha derecha o ambas para lograr un diseño más limpio.

Este artículo le mostrará cómo ocultar las flechas del Carrusel en GemPages utilizando código CSS personalizado simple, sin necesidad de experiencia en programación.

¿Cuándo Debería Ocultar las Flechas del Carrusel?

A continuación se presentan algunos casos de uso comunes en los que ocultar las flechas del Carrusel puede mejorar el diseño de su tienda y la experiencia del usuario:

1. Crear un Diseño Móvil Más Limpio

En pantallas pequeñas, las flechas pueden ocupar demasiado espacio o superponerse al contenido. Ocultarlas puede hacer que el Carrusel se vea más ordenado y sea más fácil de visualizar.

2. Usar la Reproducción Automática en Lugar de la Navegación Manual

Si su Carrusel se desplaza automáticamente entre los elementos, es posible que los visitantes no necesiten las flechas de navegación manual.

3. Construir un Diseño Minimalista

Algunas marcas prefieren un aspecto limpio y moderno sin controles de navegación visibles.

4. Evitar el Deslizamiento Manual

En algunas secciones promocionales o controles deslizantes de anuncios, es posible que desee que los usuarios vean el contenido en una secuencia fija sin hacer clic en las flechas.

5. Usar Métodos de Navegación Alternativos

Es posible que ya esté utilizando:

• Navegación por puntos
• Gestos de deslizamiento en dispositivos móviles
• Funcionalidad de desplazamiento automático

En estos casos, las flechas pueden volverse innecesarias.

Cómo Ocultar las Flechas del Carrusel en GemPages

Paso 1: Seleccione el Elemento Carrusel

Dentro del editor de GemPages, haga clic en el elemento Carrusel que contiene la flecha que desea ocultar.

Paso 2: Abra el Panel de Código Personalizado

Haga clic derecho en el elemento Carrusel y seleccione Personalizado.

El panel de Código Personalizado aparecerá.

Paso 3: Agregue el Código CSS Personalizado

1. Ocultar la Flecha Izquierda

Agregue el siguiente código en el campo de Código Personalizado:

.gTgcgeWuMC .gem-slider-previous{

 opacity: 0 !important;

 visibilidad: oculto! importante;

}

2. Ocultar la Flecha Derecha

Agregue este código para ocultar la flecha derecha:

.gTgcgeWuMC .gem-slider-after{

 opacity: 0 !important;

 visibilidad: oculto! importante;

}

Nota:

Reemplace .gTgcgeWuMC con el ID real de su elemento Carrusel.

Puede encontrar el ID del elemento en la parte superior del panel de Código Personalizado.