Cómo reemplazar los puntos del carrusel con botones de navegación (flechas) usando código personalizado.

Por defecto, Navegación en carrusel en GemPages se muestra como indicadores de puntos. Si bien los puntos funcionan bien en muchos casos, algunos usuarios prefieren usar botones de flecha izquierda y derecha para una navegación más sencilla y una experiencia de usuario más moderna.

Con un sencillo fragmento de código CSS personalizado, puedes reposicionar las flechas de navegación y crear un diseño más limpio que reemplace la navegación predeterminada basada en puntos. Este artículo le guiará paso a paso sobre cómo Reemplazar los puntos del carrusel con flechas de navegación en GemPages. utilizando código personalizado.

Paso a paso: Cómo reemplazar los puntos del carrusel con botones de navegación

Siga estos pasos cuidadosamente para aplicar el diseño de flechas de navegación.

Paso 1: Haga clic con el botón derecho en el elemento Carrusel.

Abra su página en el Editor de GemPages.

Entonces:

• Localice la opción elemento Carrusel
• Haz clic derecho directamente en el carrusel.
• Seleccione Código Personalizado

Esto abrirá la Panel de código personalizado CSS.

Paso 2: Copie la clase Carousel de la primera línea.

Dentro del panel de Código personalizado:

• Mira el primera línea
• Usted verá el Clase carrusel

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

Paso 3: Pegue el código del botón de navegación.

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

.carouselID .gem-slider-previous {

 abajo: -40px !importante;

 arriba: auto !importante;

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

}

.carouselID .gem-slider-next {

 abajo: -40px !importante;

 arriba: auto !importante;

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

}

Entonces:

Reemplazar:

ID del carrusel

Con:

Tu clase Carrusel real que copiaste en el Paso 2.

Después de esto:

• Haga clic en Guardar
• Actualizar la vista previa
• Compruebe el diseño de navegación.

Paso 4: Haga clic en Guardar para aplicar los cambios.

Una vez que hayas terminado de pegar el código:

• Haga clic en Guardar
• Actualiza la vista previa de la página si es necesario.

Ahora, la navegación de tu carrusel debería mostrar botones de flecha situados debajo del control deslizante, lo que hará que la navegación sea más clara y fácil de usar.