Volver a los artículos
Cómo añadir flechas personalizadas a un deslizador de Webflow
Tutoriales

Cómo añadir flechas personalizadas a un deslizador de Webflow

Aprende a añadir flechas personalizadas a tu componente deslizante de flujo web nativo y a cambiar las diapositivas con cualquier botón

Flowbase
19 de noviembre de 2019

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.

SOBRE EL AUTOR
Flowbase

Flowbase es la empresa líder en recursos de Webflow. Proporcionamos a los clientes una colección de recursos premium y gratuitos que les ayudan a crear mejores productos con Webflow.

¿Disfrutó de esta lectura?

Manténgase al día con las últimas noticias, estrategias e ideas sobre el negocio del vídeo enviadas directamente a su bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
¡Uy! Algo salió mal al enviar el formulario.

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.