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

Al agregar flechas personalizadas al deslizador, podemos evitar las limitaciones establecidas por las flechas del deslizador de flujo web predeterminado. En esta breve guía, simplemente ocultaremos las flechas predeterminadas y utilizaremos un pequeño script para comunicarnos con nuestros nuevos botones. Comencemos.

Ocultar las flechas deslizantes predeterminadas / nativas

Lo primero que querrás hacer es ocultar las flechas deslizantes predeterminadas. No las borres, sólo cambia la pantalla a oculta.

Construye las flechas personalizadas (Botones / Enlaces etc)

Ahora vamos a construir algunas flechas personalizadas. Sean creativos y constrúyanlas en la posición que quieran. Aquí están nuestras flechas. Asegúrate de tener una flecha izquierda/derecha.

Dar los nombres de clase apropiados

Ahora vamos a dar el nombre de clase "deslizador-izquierda" y "deslizador-derecha" a las flechas correspondientes.

Configura los deslizadores #ID para comunicarse con nuestro guión.

Ahora démosle al deslizador una etiqueta de identificación para que el guión sepa dónde apuntar. En este caso nuestra identificación es "flowbaseSlider

‍

Añade el guión personalizado.

Añade el siguiente script en la configuración del código personalizado de los sitios web

var Webflow = Webflow || [];
Webflow.push(function() {
 var l = $('#flowbaseSlider .w-slider-arrow-left');
 var r = $('#flowbaseSlider .w-slider-arrow-right');
 $('#flowbaseSlider')
   .on('click', '.slider-left', function() {
     l.trigger('tap');
   })
   .on('click', '.slider-right', function() {
     r.trigger('tap');
   });
});

Eliminar el resaltado accidental (opcional)

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

.arrow {
 -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
       -ms-user-select: none; /* Internet Explorer/Edge */
           user-select: none; /* Non-prefixed version, currently
                                 supported by Chrome and Opera */                                  

¡Eso es! Publica y haz una vista previa de tu sitio.