Dance of the Dots: coreografía de controles deslizantes personalizados en Webflow

Hola, diseñadores de Webflow. Hoy nos adentramos en el jugoso mundo de jQuery y los controles deslizantes personalizados. Sí, estamos a punto de hacer que esos puntos estáticos debajo de tu control deslizante de Webflow bailen a tu ritmo. Hace poco tuvimos un proyecto en el que necesitábamos controlar el control deslizante de Webflow mediante bloques de enlaces fuera del elemento deslizante de Webflow. (Resumiendo, tenemos un elemento de navegación superpuesto con un montón de bloques de enlaces que tenían que llevarte a diapositivas específicas cuando hacías clic en ellas). A continuación se muestra un breve vídeo que muestra nuestros controles personalizados:

<div style="padding:81.1% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/873388654?badge=0&autopause=0&quality_selector=1&progress_bar=1&player_id=0&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"><script src="https://player.vimeo.com/api/player.js"></script></iframe></div>

De todos modos, buscamos un montón en Google, descubrimos que podíamos activar un cambio en una diapositiva específica simulando un clic en el punto de navegación de esa diapositiva (y creamos un script para hacerlo). Empecemos dándote el script que vas a necesitar para esto:

<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">
Vea el bolígrafo <a href="https://codepen.io/milkmoonstudio/pen/rNoRzNG">
</a><a href="https://codepen.io/milkmoonstudio">Controles deslizantes personalizados de Jakes van Eeden (@milkmoonstudio)</a>
en <a href="https://codepen.io">CodePen</a>.
</iframe>

Preludio del baile: lo que necesitarás

Antes de sumergirnos en el océano de códigos, asegúrate de tener preparado lo siguiente:

• Un proyecto de Webflow en el que desea implementar los controles deslizantes personalizados. Las clases del control deslizante no importan demasiado, en el script llamamos al control deslizante nativo y no a los nombres en Webflow: .w-slider-dot
  Ni siquiera los tenemos visibles en nuestro proyecto, la visibilidad de los elementos estaba configurada como oculta.
• Una comprensión muy básica de jQuery (no temas, lo veremos).

Acto 1: Preparando el escenario

Lo primero es asegurarnos de que nuestro proyecto Webflow esté preparado y preparado para alguna acción de jQuery.

Creación del control deslizante:

1. Navega hasta tu diseñador de flujo web.
2. Crea un nuevo elemento deslizante.
3. Personalízala a tu gusto, pero deja los puntos debajo del control deslizante tal como están u ocúltalos.

Creación de puntos personalizados:

1. Crea un nuevo bloque div y asígnale el nombre controls__wrap.
2. Ahora, dentro de controls__wrap, crea tus bloques de enlace (uno para cada diapositiva de tu control deslizante) y asigna a cada uno una clase de slider__controller.
3. Diseñe estos bloques de enlaces como desee: estos son los controles que lo llevarán a cada diapositiva de su control deslizante, su orden corresponde al orden de sus diapositivas.

Acto 2: El jQuery Ballet

¡Ahora, el código que hará que esos puntos bailen! Vamos a usar jQuery para crear una interacción animada entre nuestros puntos personalizados y los puntos deslizantes nativos de Webflow.

Preparación de Code Pen:

1. Dirígete a la configuración del proyecto o a la configuración de la página.
2. En la pestaña «Código personalizado», encontrarás un refugio para tus scripts personalizados en la sección «Código de pie de página». Aquí es donde residirá nuestro script jQuery.

Pegar el script:

1. Copia el guion que compartimos anteriormente.
2. Pégalo en la sección «Código de pie de página» de la configuración de tu proyecto.

Entendiendo la magia:

El script recorre cada punto personalizado de .controls__wrap y, cuando se hace clic en un punto personalizado, se activa un evento de toque en el punto deslizante nativo de Webflow correspondiente y se desplaza hasta la diapositiva correspondiente.

Acto 3: Se cierran las cortinas, sobrevienen los aplausos

Ahora, vuelve al diseñador, pulsa publicar y ¡contempla la danza de los puntos en tu sitio en vivo! Tus puntos personalizados ahora deberían controlar el control deslizante de Webflow, proporcionando una experiencia personalizada para tu audiencia.

Esperamos que esto os ayude tanto como a nosotros. No estoy seguro de a quién se le ocurrió la idea de controlar los puntos. Acabamos de encontrar una referencia y un fragmento del código en Stackoverflow y luego lo desarrollamos a partir de ahí, pero es genial, así que disfrútalo.