Cómo hice un control deslizante realmente adaptable (carrusel)

¡Buenos días, queridos lectores y escritores!

Hoy les contaré cómo me enfrentó el proyecto con la tarea de fabricar un control deslizante adaptativo y qué surgió

Sobre el artículo y para quién es

Estoy escribiendo este artículo no tanto porque quiero obtener una respuesta de la comunidad para resolver este problema, sino también porque resolver las preguntas del artículo me parece fundamental para comprender la adaptabilidad del control deslizante en la web. Si alguien ya ha escrito dichos componentes, responda y comparta experiencias similares.

Un poco sobre lo que pasó y qué herramientas se usaron

En la aplicación React, debe hacer un carrusel (en adelante usaré este nombre), cuyos elementos se verán armoniosamente en la pantalla de cualquier tamaño. Hay varias limitaciones:

1. El ancho máximo del elemento es de 150 px
2. Herramienta utilizada - React Owl Carousel
3. El tamaño máximo del contenedor para el carrusel es 1190 px
4. También hay indicadores de la propiedad de relleno para diferentes pantallas (afecta el ancho de la parte visible del contenedor) y el margen (entre elementos de al menos 5 píxeles)
5. El carrusel debe ir en ciclos.
   Y otras condiciones que no afectan el tema del artículo.

Digresión sobre la mecánica del carrusel.

Muchos carruseles (React Owl Carousel no es una excepción) usan la clase activa especial para mostrar qué describe los elementos que se muestran actualmente en la pantalla.

Para mostrar un bucle infinito en la pantalla, el primer y el último elemento se duplican (la mecánica y los problemas de este doblaje son un tema para un artículo separado).

Las propiedades se describen mediante objetos especiales, nos interesará el objeto receptivo, que es responsable de reasignar propiedades.

El resto de los datos sobre la mecánica del trabajo serán claros en el curso de la descripción de la solución.

Primeros problemas

Al principio, todo transcurrió sin problemas: los elementos en sí mismos fueron escritos y estilizados, las propiedades básicas de todo el carrusel se explicaron. Los problemas comenzaron al configurar la propiedad {loop: true}

El carrusel está girando inadecuadamente

Al desplazarse hasta el final de la lista, el espacio libre permaneció en el carrusel y durante algún tiempo se desplazó por él.

La razón era el ancho máximo del elemento, no consistente con su número. Un ejemplo concreto es el ancho del contenedor de 1190 px, con el número de elementos establecido en 3.

En otras palabras, el carrusel espera que 3 elementos se extiendan a 1190 px, y no pueden llegar a ser más grandes que 150 px.

Aumentar el número de artículos.

El problema adopta un ángulo diferente: si hay demasiados elementos por contenedor, su ancho se vuelve demasiado pequeño (¡y hay contenido dentro de ellos!) Si configuro la propiedad de ancho mínimo, entonces, en algunos tamaños de pantalla, los elementos se arrastran entre sí, ignorando el margen, lo que viola las condiciones .

Resumimos las condiciones de adaptabilidad.

1. El número de elementos en la pantalla debe ser menor que la relación entre el tamaño de la pantalla y
   ancho mínimo del elemento; de lo contrario, incluso los elementos del ancho mínimo no caben en la pantalla.
2. La relación entre el tamaño de la pantalla y el número estimado de elementos no debe exceder la longitud máxima estimada; de lo contrario, existe un problema con el bucle.
3. Las condiciones descritas anteriormente deben cumplirse para cualquier tamaño de pantalla (de 330 px a 1190 px).

Solucionamos el problema como programadores

Si aborda el problema secuencialmente, es obvio que tiene que renunciar a algo, en mi caso fue el ancho mínimo del elemento.

¿Cuál debería ser el ancho mínimo del elemento para que se cumplan las condiciones de adaptabilidad de todas las pantallas de contenedor?

//       const getBackTrace = (minScreen = 300, maxElementWidth = 150) => { let backTrace = {} for (let minElementWidth = maxElementWidth; minElementWidth > 0; minElementWidth--){ //            //     backTrace for(let screen = minScreen; screen <= 1100; screen++){ let elementCount = screen / minElementWidth | 0 if((screen / elementCount) > maxElementWidth){ backTrace[minElementWidth] = screen break } } } for(let key in backTrace){ //        ,      if (backTrace[key - 1] == undefined){ backTrace.result = key - 1 return backTrace } } } // getBackTrace(300, 150).result = 100 

El resultado en 100px no me convenía, ya que no me permite ajustar todo el contenido del elemento. Por lo tanto, continuamos la búsqueda hasta encontrar el valor correcto y buscar qué más sacrificar.

¿Recuerdas el subtítulo? Para buscar, escribe una función

 const getMinScreen = (minWidth = 300, maxWidth = 767, maxElementWidth = 150) => { let research = [] //  ,          // getBackTrace,       for(let min = minWidth; min < maxWidth; min++){ let { result } = getBackTrace(min, maxElementWidth) research.push({result, min}) } //          "  "  return research .reduce((acc, curr, idx, arr) => { let obj = {} let {min, result} = curr obj[min] = result if(idx == 0) return obj if(arr[idx-1].result == result){ return {...acc} } else { return {...acc, ...obj} } }, {}) } /* Returned object {300: 100, 303: 101, 306: 102, 309: 103, 312: 104, 315: 105, 318: 106, 321: 107, 324: 108, 327: 109, 330: 110, 333: 111, 336: 112, 452: 113, 456: 114, 460: 115, 464: 116, 468: 117, 472: 118, 476: 119, 480: 120}   480    */ 

Teniendo en cuenta el objeto obtenido, puede ver un gran salto en la transición de 336 px a 452 px.
Tomé una decisión decidida de limitar la adaptabilidad a 36px.

Describimos el objeto adaptativo.

Parece que el problema se ha resuelto, pero tal solución solo prueba que el cumplimiento de las condiciones es posible para pantallas de 336 px, pero no describe el método. Pero hay diferentes condiciones que me limitan en la producción de un objeto con propiedades de adaptabilidad.
Habiendo aceptado por mí mismo que el ancho mínimo de un elemento sin pérdidas puede ser de 107 px, variando el valor del margen, llegué a los siguientes indicadores:

Lo único que queda es recopilar los datos recibidos en un montón e implementar el objeto adaptativo:

 getResponsiveOwlItems = () => { let responsive = {}; responsive[0] = {items: 2, nav: false} // 112 = 107 (minimal div) + 5 (margins) let itemMinWidthReference = 112; const getOneWidth = deviceWidth => deviceWidth / itemMinWidthReference | 0 // 1190 - container width for(let i = itemMinWidthReference * 3 + 20; i <= 1190; i += itemMinWidthReference){ // .container padding > 768 90px + padding 90(.container) // .container padding < 768 40px + padding -40(.container) // +20px stagePadding let padding = i > 767 ? 200 : 20 if(i > (468 + padding)) { itemMinWidthReference = 117 } if(i > (767 + padding)) { itemMinWidthReference = 127 } let items = getOneWidth(i - padding) let nav = i > 700 ? true : false let margin = 5; if (i > 468){ margin = 10 } if (i > 767){ margin = 15 } responsive[i.toString()] = {items, nav, margin} //      itemMinWidthReference i = i - (i % itemMinWidthReference) + 1 } return responsive; } 

El día de la publicación, todo parece lógico, y no pude reproducir el error en el carrusel; probablemente todo funcione según lo previsto.

¡Gracias por su atención, esperando sus comentarios y comentarios!