Aprenda a agregar deslizadores de flecha personalizados al componente del deslizador de flujo web

By adding custom arrows to your slider, we can avoid the limitations set by the default webflow slider arrows. In this short guide, we will simply hide the default arrows, and use a small script to communicate with our new buttons. Let's get started.

Hide the Default / Native Slider Arrows

The first thing you'll want to do is hide the default slider arrows. Don't delete these, just change the display to hidden.

Build the custom arrows (Buttons / Links etc)

Ahora vamos a construir algunas flechas personalizadas. Sea creativo y construya estos en la posición que desee. Aquí están nuestras flechas. Sólo asegúrese de que tiene una flecha izquierda/derecha.

Give the appropriate Class Names

Now let's give the class name 'slider-left' and 'slider-right' to the relevant arrows.

Set the sliders #ID to communicate with our script.

Ahora vamos a darle al deslizador una etiqueta de identificación para que el guión sepa dónde apuntar. En este caso nuestro ID es 'flowbaseSlider'.

‍

Add the custom script.

Añada el siguiente script a la configuración
de código personalizado de los sitios web

‍

Remove accidental highlighting (optional)

A veces el usuario resaltará el icono, este código evitará que esto suceda. Es totalmente opcional

‍

‍

¡Eso es! Publique y previsualice su sitio.

‍