Los controles deslizantes de sitios web son elementos de interfaz de usuario flexibles que pueden ser útiles para compartir varias imágenes o transmitir información de manera eficiente sin desperdiciar espacio valioso en su página de inicio.
En este artículo, le mostraremos cómo usar el paquete de control deslizante arrastrable para crear un control deslizante con funcionalidad arrastrable en React.
Saltar hacia adelante:
¿Qué es un control deslizante?
Un control deslizante de sitio web es una presentación de diapositivas que muestra una serie de imágenes o elementos dispuestos horizontal o verticalmente en un solo espacio. Las imágenes se muestran individualmente durante un período de tiempo determinado con un efecto de transición entre pasar de una imagen o elemento a otro.
Un usuario puede navegar a través de las imágenes en el cursor usando un conjunto de comandos de navegación, y las imágenes o elementos también se pueden recorrer. Un control deslizante puede ayudar a un sitio web a presentar elementos individuales de una manera visualmente atractiva mientras ahorra espacio en la pantalla.
Los controles deslizantes de sitios web que presentan testimonios de clientes pueden ser beneficiosos para generar confianza y credibilidad con nuevos prospectos. Los controles deslizantes también se pueden usar para mostrar diferentes ofertas de servicios o mostrar varias imágenes de un producto para que un cliente potencial pueda verlo desde diferentes ángulos.
Este tipo de elemento de interfaz de usuario es una opción atractiva para una página larga de contenido que se desplaza. Con un control deslizante, puede agrupar información en un solo lugar, establecer un ritmo cómodo para recorrer cada elemento e incluso agregar una función de reproducción automática.
¿Qué es un cursor arrastrable?
Los cursores arrastrables se navegan manualmente; el usuario navega de un elemento a otro manteniendo presionado y arrastrando el elemento que está actualmente a la vista hacia la izquierda o hacia la derecha. Para ver el elemento siguiente, el usuario mantiene presionado y arrastra el elemento actual hacia la izquierda. De manera similar, para ver el elemento anterior, el usuario mantiene presionado y arrastra el elemento actual hacia la derecha.
¿Qué es un control deslizante de reacción plegable?
Para crear un cursor arrastrable en React, podemos construirlo desde cero o usar un paquete React.
El uso de un paquete React puede mejorar su productividad, ya que reducirá el tiempo que dedica a escribir código. Sin embargo, esto significa que su base de código dependerá (y posiblemente sea vulnerable) del paquete. Es por eso que es mejor seleccionar un paquete de código abierto que tenga una gran comunidad que contribuya, encuentre, informe y corrija errores y, por lo tanto, mantenga el código seguro.
Para este artículo, usaremos el paquete react-draggable-slider. Este paquete es fácil de usar y viene con un efecto de desplazamiento incorporado.
Demostración del control deslizante arrastrable de React
Para demostrar la creación de un control deslizante arrastrable en React, configuraremos una aplicación React, instalaremos el paquete de control deslizante arrastrable, luego crearemos el control deslizante y estableceremos los parámetros del control deslizante.
¡Empecemos!
Creando la aplicación React
Use el siguiente comando para crear una aplicación React y asígnele el nombre react-draggable-slider:
npx create-react-app react-draggable-slider
Ahora abra la aplicación en el editor de código de su elección. En esta demostración, usaré VS Code.
Instalación del paquete de control deslizante de arrastre de reacción
En el momento de escribir este artículo, el paquete de control deslizante arrastrable no es compatible con React v18, que es la versión de React que obtendremos cuando construyamos la aplicación React.
Entonces, si intentamos instalar el paquete deslizante ahora mismo usando el comando: npm i react-draggable-slider, no se instalará y obtendremos un error de conflicto de dependencia en nuestra terminal como se muestra a continuación:
Más artículos interesantes de LogRocket:
Para solucionar este problema, tendremos que degradar las versiones del paquete de reacción y del paquete de reacción-dom de nuestra aplicación React a v16 para que sea compatible con el paquete de control deslizante de arrastre de reacción.
No hay forma de especificar la versión de React deseada al compilar la aplicación, por lo que tuvimos que compilar la aplicación antes de degradar la versión.
Primero, navegue hasta el archivo package.json y cambie las versiones del paquete de reacción y del paquete de reacción-dom de v18.1.0 a v16.13.1.
Luego ejecute el comando: npm install en la terminal. Esto reemplazará automáticamente las versiones actuales en nuestra carpeta node_modules con la nueva que especificamos en el archivo package.json.
Ahora estamos listos para instalar el paquete deslizante:
npm i react-draggable-slider
Llegados a este punto, no deberíamos ver ningún error en nuestro terminal. Para ver la aplicación en el navegador, ejecute la aplicación React usando uno de los siguientes comandos:
npm start yarn start
Notará en el navegador que hay un nuevo error que indica que no se encontró el módulo React-dom/client. Este error ocurre porque estamos usando React v16.
Para resolver este error, necesitaremos hacer algunos cambios en nuestro archivo index.js cambiando la ruta del archivo del módulo.
Navegue hasta el archivo index.js y cambie la ruta del archivo de importación de ReactDom desde:
import ReactDOM from 'react-dom/client';
a:
import ReactDOM from 'react-dom';
A continuación, debemos ajustar cómo renderizamos nuestra aplicación React al DOM. Para hacer esto, modifique el código utilizado para renderizar la aplicación React desde:
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
a:
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
Ahora regrese y vea la aplicación en su navegador. Debería ver el contenido de la aplicación sin ningún error:
OK, hemos creado nuestra aplicación; ahora es el momento de crear nuestro cursor arrastrable.
Creación de cursores
Para crear el control deslizante, navegue hasta el archivo App.js y elimine el elemento jsx actual (es decir, el encabezado) ya que no es necesario. Reemplazaremos este elemento con el componente Slider que importaremos desde react-draggable-slider. También pasaremos un objeto sliderSettings como accesorio en nuestro componente Slider que crearemos más adelante.
import Slider from "react-draggable-slider";
…
<div className="App">
<Slider sliderSettings={sliderSettings} />
</div>
A continuación, crearemos una matriz de objetos llamada projectList. Usaremos esta matriz para almacenar los elementos que se mostrarán en cada control deslizante.
const projectList = [
{
title: "Nature's Life",
image: project1,
description:
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
},
{
title: "Into The Waters",
image: project2,
description:
"Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
},
{
title: "Higher Than The Stars",
image: project3,
description:
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu."
},
{
title: "Miniature Wonders",
image: project4,
description:
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
},
{
title: "Giants Of History",
image: project5,
description:
"Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
}
];
Configuración de los parámetros del cursor
Ahora establezcamos nuestros parámetros deslizantes; estos se pasarán a nuestro control deslizante para configurar su comportamiento.
Comenzaremos creando un objeto llamado sliderSettings que tiene los siguientes accesorios: datos, velocidad, aceleración, bgColor, showButton, buttonText, buttunHref y buttonTarget. Estos accesorios definen el comportamiento de nuestro control deslizante y su visualización.
Los datos
La propiedad de datos acepta una matriz. La tabla de objetos representa los detalles de los elementos deslizantes o diapositivas que se mostrarán; en nuestro caso, la lista de proyectos. Cada objeto acepta tres pares clave-valor: título, imagen y descripción. De forma predeterminada, la propiedad de datos se establece en una matriz vacía, [].
la rapidez
El accesorio de velocidad acepta un número entero. Determina la velocidad (en milisegundos) a la que debe avanzar el cursor cuando se mueve al elemento siguiente o anterior. Por ejemplo, un valor de velocidad de 3000 equivale a 3 seg. El valor predeterminado de prop de velocidad es 500 ms.
relajación
El accesorio de aceleración acepta una cadena. Hay cuatro flexiones GSAP disponibles para animar el deslizamiento: potencia, espalda, elástico y exposición. Prueba cada uno de ellos, luego elige el que más te guste. Si no se especifica ningún valor, el valor de la propiedad de aceleración se establecerá de forma predeterminada en la aceleración, que es el valor predeterminado del navegador.
bgColor
El accesorio bgColor acepta una cadena. Establece el color de fondo de todo el control deslizante y acepta valores HEX y RGB (A). Por ejemplo, #ffffff o rgba(255, 255, 255, 0,05). El valor predeterminado de bgColor prop es rgba(255, 255, 255, 0.05).
botón mostrar
La propiedad showButton acepta un valor booleano. Si es verdadero, se mostrará un botón para cada elemento o diapositiva; sin embargo, no se mostrará ningún botón si showButton prop se establece en falso. De forma predeterminada, el valor de prop showButton se establece en verdadero.
botón de texto
La propiedad buttonText acepta una cadena. Representa el texto que se mostrará dentro del botón para cada elemento. De forma predeterminada, el valor se establece en Mostrar estudio de caso.
botónHref
La propiedad buttonHref acepta una cadena. Esta cadena es un atributo href que permite que cada elemento del control deslizante se vincule a otra página, lo que permite al usuario ver detalles adicionales sobre el elemento. De forma predeterminada, el valor prop de buttonHref se establece en #.
botón de destino
La propiedad buttonTarget acepta una cadena. Cuando el usuario hace clic en un botón, esta propiedad especifica si el enlace debe abrirse en la página actual o en otra página. El valor puede ser _self o _blank. De forma predeterminada, el valor prop buttonTarget se establece en _blank.
Comencemos pasando solo la propiedad de datos para ver cómo se vería nuestro cursor.
const sliderSettings = {
data: projectList,
};
Si vemos nuestro control deslizante en el navegador, podemos ver que tiene las propiedades predeterminadas del control deslizante arrastrable como se describió anteriormente. Ahora vamos con el resto de nuestros complementos con nuestros valores favoritos. Dado que no especificamos un valor para la relajación de prop, por defecto será cómodo.
const sliderSettings = {
data: projectList,
speed: 3000,
bgColor: "#070707",
showButton: true,
buttonText: "View projects",
buttonHref: "https://www.example.com",
buttonTarget: "_self"
};
También escribiremos algunos estilos en nuestro archivo styles.css para nuestro cuerpo y nuestra etiqueta de anclaje, que también es nuestro botón de llamada a la acción, y luego importaremos el archivo a nuestro archivo App.js.
body {
font-family: sans-serif;
text-align: center;
background-color: #070707;
color: #fff;
}
a:link,
a:hover,
a:active,
a:visited {
color: #eee;
border-top: 1px solid #434141;
border-bottom: 3px solid #434141;
border-radius: 20px;
}
En este punto, nuestro archivo App.js debería verse así:
import React from "react";
import Slider from "react-draggable-slider";
import "./styles.css";
import project1 from "./imgs/bibi-pace-Hi4fWKU2KSk-unsplash.jpg";
import project2 from "./imgs/scott-webb-e3dY8laAQtA-unsplash.jpg";
import project3 from "./imgs/alexander-andrews-fsH1KjbdjE8-unsplash.jpg";
import project4 from "./imgs/daan-mooij-RyxShs7mG8E-unsplash.jpg";
import project5 from "./imgs/damien-santos-M5rim8Yh4LY-unsplash.jpg";
export default function App() {
const projectList = [
{
title: "Nature's Life",
image: project1,
description:
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
},
{
title: "Into The Waters",
image: project2,
description:
"Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
},
{
title: "Higher Than The Stars",
image: project3,
description:
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. Proin rhoncus magna lectus, nec consequat augue ultricies eu."
},
{
title: "Miniature Wonders",
image: project4,
description:
"Praesent quis congue nisi. Vivamus dapibus suscipit magna at imperdiet. Mauris consectetur pharetra metus eu suscipit. Maecenas augue tortor, consequat vitae lacus id, pharetra tempor mauris. Suspendisse sodales commodo erat, non imperdiet nisl scelerisque at. Nulla porttitor gravida diam, in ornare ipsum accumsan bibendum. Morbi ut ante metus. "
},
{
title: "Giants Of History",
image: project5,
description:
"Duis at tellus vitae velit aliquet varius. Fusce luctus libero et ligula tristique lobortis. Vestibulum eu placerat risus, eu semper augue. Integer at purus sit amet elit pretium viverra. Suspendisse id fringilla nibh, nec dictum urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. "
}
];
const sliderSettings = {
data: projectList,
speed: 3000,
easing: "ease",
bgColor: "#070707",
showButton: true,
buttonText: "View projects",
buttonHref: "https://www.example.com",
buttonTarget: "_self"
};
return (
<div className="App">
<Slider sliderSettings={sliderSettings} />
</div>
);
}
Aquí está el control deslizante con sus nuevos estilos CSS:
Notará que hemos cambiado el color del texto, así como el color de fondo de la página y del cursor. También diseñamos el botón y cambiamos su valor de texto. Si usamos los GSAP Power Relaxers para animar el deslizamiento, la animación del deslizamiento se verá así:
Puede probar las otras opciones de apoyo de refuerzo por su cuenta y elegir la que más le guste y también experimentar con los otros valores de apoyo.
También notará que las tarjetas de imagen tienen un agradable efecto de desplazamiento cuando el cursor se mueve sobre ellas. Esta es una característica genial e integrada del control deslizante de reacción arrastrable.
Conclusión
En este tutorial, mostramos lo fácil que es crear un control deslizante arrastrable en React usando el paquete de control deslizante de arrastre de reacción. Mostramos cómo compensar un problema de compatibilidad con la versión más reciente de React. También mostramos cómo modificar la configuración predeterminada del control deslizante arrastrable para personalizar el estilo y la animación de nuestro control deslizante.
Siéntase libre de ver y jugar con el código aquí. También puede consultar otra herramienta de control deslizante de React, Swiper, que también es un paquete muy bueno.
Visibilidad completa de las aplicaciones React de producción
La depuración de aplicaciones React puede ser un desafío, especialmente cuando los usuarios encuentran problemas que son difíciles de reproducir. Si desea monitorear y rastrear el estado de Redux, mostrar automáticamente errores de JavaScript y rastrear solicitudes de red lentas y tiempos de carga de componentes, pruebe LogRocket. 
LogRocket es como un DVR para aplicaciones web y móviles, literalmente graba todo lo que sucede en su aplicación React. En lugar de adivinar por qué ocurren los problemas, puede agregar e informar el estado en el que se encontraba su aplicación cuando ocurrió un problema. LogRocket también supervisa el rendimiento de su aplicación, creando informes con métricas como la carga de la CPU del cliente, el uso de la memoria del cliente y más.
El paquete de middleware LogRocket Redux agrega una capa adicional de visibilidad a sus sesiones de usuario. LogRocket registra todas las acciones y el estado de sus tiendas Redux.
Modernice la forma en que depura sus aplicaciones React: comience a monitorear de forma gratuita.
