La danza de los puntos: controles personalizados para sliders de Webflow con jQuery

Hola, diseñadores de Webflow. Hoy nos adentramos en el jugoso mundo de jQuery y los controles personalizados para sliders. Sí, vamos a conseguir que esos puntos estáticos bajo tu slider de Webflow bailen a tu ritmo. Hace poco tuvimos un proyecto en el que necesitábamos controlar el slider de Webflow con bloques de enlace situados fuera del elemento slider. (Resumiendo: teníamos un menú superpuesto con un montón de bloques de enlace que, al hacer clic en ellos, debían llevarte a diapositivas concretas). Aquí tienes un breve vídeo con nuestros controles personalizados:

<div style="padding:81.1% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/873388654?badge=0&amp;autopause=0&amp;quality_selector=1&amp;progress_bar=1&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Custom Slider Controls in Webflow"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

En fin, buscamos bastante en Google, descubrimos que podíamos provocar el cambio a una diapositiva concreta simulando un clic en el punto de navegación de esa diapositiva, y armamos un script para hacerlo. Empecemos por darte el script que vas a necesitar:

<iframe height="300" style="width: 100%;" scrolling="no" title="Custom Slider Controls" src="https://codepen.io/milkmoonstudio/embed/preview/rNoRzNG?default-tab=html" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/milkmoonstudio/pen/rNoRzNG">
Custom Slider Controls</a> by Jakes van Eeden (<a href="https://codepen.io/milkmoonstudio">@milkmoonstudio</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

Preludio de la danza: lo que necesitarás

Antes de meternos en el océano de código, asegúrate de tener listo lo siguiente:

• Un proyecto de Webflow donde quieras implementar los controles personalizados del slider. Las clases del slider no importan demasiado. En el script llamamos a la clase nativa del slider en lugar de a nombres que tú hayas definido en Webflow: .w-slider-dot
  Ni siquiera los tenemos visibles en nuestro proyecto: la visibilidad del elemento estaba configurada como oculta.
• Un conocimiento muy básico de jQuery (no temas, lo repasaremos paso a paso).

Acto 1: Preparando el escenario

Lo primero es asegurarnos de que nuestro proyecto de Webflow esté listo y a punto para la acción con jQuery.

Crear el slider:

1. Ve a tu Webflow Designer.
2. Crea un nuevo elemento slider.
3. Personalízalo a tu gusto, pero deja los puntos bajo el slider tal como están, o ocúltalos.

Creación de los puntos personalizados:

1. Crea un nuevo bloque div y llámalo controls__wrap.
2. Dentro de controls__wrap, crea tus bloques de enlace (uno por cada diapositiva de tu slider) y dale a cada uno la clase slider__controller.
3. Dales el estilo que quieras a estos bloques de enlace: son los controles que te llevarán a cada diapositiva de tu slider. Su orden corresponde al orden de tus diapositivas.

Acto 2: El ballet de jQuery

¡Y ahora, el código que hará bailar a esos puntos! Vamos a usar jQuery para crear una interacción viva entre nuestros puntos personalizados y los puntos nativos del slider de Webflow.

Añadir el código:

1. Ve a los Site settings (para todas las páginas) o a los Page settings de la página con el slider.
2. En la pestaña ‘Custom Code’ de los Site settings encontrarás un refugio para tus scripts personalizados en la sección ‘Footer code’. En los Page settings, el equivalente es el campo ‘Before </body> tag’ del área Custom code. Aquí es donde vivirá nuestro script de jQuery.

Pegar el script:

1. Copia el script que compartimos antes.
2. Pégalo en la sección ‘Footer code’ de tus Site settings (o en el campo ‘Before </body> tag’ de los Page settings si solo una página tiene el slider).

Entender la magia:

El script recorre cada punto personalizado dentro de .controls__wrap y, cuando se hace clic en uno, dispara un evento tap en el punto nativo correspondiente del slider de Webflow, que navega a la diapositiva respectiva.

Acto 3: Cae el telón, llegan los aplausos

Ahora vuelve al Designer, pulsa publicar y contempla la danza de los puntos en tu sitio en vivo. Tus puntos personalizados ya deberían controlar el slider de Webflow y ofrecer una experiencia a medida para tu audiencia.

Esperamos que esto te ayude tanto como nos ayuda a nosotros. No sé quién tuvo la idea de controlar los puntos; simplemente encontramos una referencia y un fragmento de código en Stack Overflow y lo desarrollamos a partir de ahí, pero es ingenioso, así que disfrútalo.

Preguntas frecuentes

¿Cómo enlazo a una diapositiva concreta de un slider de Webflow desde fuera del slider?

Coloca un bloque de enlace en cualquier parte de la página y haz que simule un clic en el punto nativo correspondiente del slider. Nuestro script hace justo eso: recorre los controles personalizados dentro de .controls__wrap y, cuando se hace clic en uno, dispara un evento tap en el .w-slider-dot correspondiente, lo que mueve el slider a esa diapositiva. El orden de tus controles personalizados tiene que coincidir con el orden de tus diapositivas.

¿Puedo ocultar los puntos predeterminados del slider de Webflow y seguir usándolos?

Sí. El script solo necesita que los puntos nativos existan en la página; no hace falta que estén visibles. En nuestro propio proyecto los puntos se ocultaron con la visibilidad del elemento, así que los puntos del slider de Webflow hacían su trabajo en segundo plano mientras nuestros controles personalizados hablaban por ellos.

¿Dónde va el código personalizado para los puntos del slider de Webflow?

Pega el script en la sección ‘Footer code’ de la pestaña ‘Custom Code’ en los Site settings (todas las páginas), o en el campo ‘Before </body> tag’ de los Page settings (solo la página con el slider). Después publica, porque el código personalizado no se ejecuta en el Designer.

Esa es la historia en pocas palabras. Si te gustan los sliders, también tenemos un artículo sobre sliders verticales con altura automática en Webflow. Si lo tuyo es hacer que las cosas se muevan, échale un vistazo a nuestra guía visual de las funciones de easing en Webflow y a nuestro artículo sobre cómo dominar las animaciones dinámicas en Webflow. Para más material de copiar y pegar, merecen una visita nuestros cloneables de Webflow, y hay más contenido como este en la sección How-To de nuestro blog.