CSS y Javascript Carrusel de hormigas

Con el advenimiento de CSS3, se hizo posible hacer animaciones sin usar bibliotecas JS, como, por ejemplo, jQuery. La propiedad de transición CSS3 le permite cambiar suavemente otras propiedades de un elemento (ancho, alto, margen, opacidad, etc.), estableciendo el tiempo y la ley de transformación como parámetros. Ofrezco un carrusel pequeño pero bastante funcional en Javascript puro. Pequeño como una hormiga, que es mucho más pequeño que un búho . Pero con casi las mismas capacidades.

Ant-carrusel le permite:

• muestra uno o más elementos;
• los elementos se pueden mostrar en forma de una cinta finita o infinita (en un bucle);
• elementos de desplazamiento automático;
• la navegación se lleva a cabo mediante flechas, puntos indicadores o vuelcos (para pantallas táctiles);
• se ajusta automáticamente a cualquier ancho de pantalla.

Ponemos nuestro carrusel en el archivo index.html (vea el archivo de ejemplo a continuación):


Los elementos <ul> <li> se usan aquí, pero <div> <div> se pueden usar en su lugar, si lo prefiere. Las flechas y los puntos indicadores se colocan absolutamente en los respectivos contenedores. Para las flechas, se utilizan patrones en forma de corchetes triangulares, que, si lo desea, puede reemplazarlos con sus patrones o generación de imágenes con los pseudoelementos : antes y : después .

Cree un carrusel con tres elementos visibles y un ancho de elemento de 270 píxeles. Entonces, el ancho máximo del carrusel es de 810 píxeles. Incluimos el archivo CSS:


Colocamos los elementos en el contenedor de la lista de carrusel de hormigas , establecemos la propiedad display: flex y presionamos todos los elementos en el borde izquierdo del contenido de justificación: flex-start . La propiedad flex: 0 0 auto establece flex-shrink en 0 (el valor predeterminado es 1). El desplazamiento de los elementos del carrusel se lleva a cabo utilizando la propiedad transiton cambiando suavemente la sangría del margen izquierdo de cero al ancho del elemento (en una dirección) o del ancho del elemento a cero (en la otra dirección). Para la función de transformación (desplazamiento), se utiliza el valor de facilidad .

Pasamos al programa. En las opciones del programa puedes configurar:

• cantidad de elementos visibles;
• visualizar elementos en forma de cinta desde el primero hasta el último o en un bucle infinito (la cinta se cierra en un anillo);
• desplazamiento automático o manual de elementos;
• intervalo de desplazamiento automático;
• velocidad de animación;
• activar / desactivar elementos de navegación: flechas, puntos indicadores, volteo táctil (para pantallas táctiles).

La inicialización del programa comienza con el hecho de que se determina el número de elementos del carrusel, los valores iniciales se asignan a variables internas, los controladores de eventos se asignan a flechas y puntos (si están conectados). Si la opción de desplazamiento automático está habilitada, se asignan controladores adicionales que dejan de desplazarse al pasar el mouse sobre los elementos del carrusel. El desplazamiento táctil se activa si hay más de 20 píxeles entre el punto donde el dedo toca la pantalla y el punto en que el dedo se arranca de la pantalla y el tiempo total que el dedo toca la pantalla es inferior a 80 ms. El autor aún no tiene mucha experiencia con este carrusel, por lo tanto, los valores dados pueden necesitar aclaración. Para un funcionamiento más confiable del controlador de desplazamiento, la distancia entre los puntos puede reducirse a 10 o 15 píxeles, y el tiempo de contacto debe aumentarse a 100 o 120 ms. El usuario de este carrusel puede corregir estos valores él mismo después de adquirir cierta experiencia en su uso.

El algoritmo de desplazamiento para elementos difiere dependiendo de si la opción de bucle está habilitada o no. Si está habilitado, al desplazarse hacia la derecha (función elemPrev ), la propiedad margen izquierda de toda la línea de los elementos this.crslList disminuye de cero a un valor negativo igual al ancho del elemento elemWidth . Al mismo tiempo, el último elemento de la derecha se clona y se inserta antes del primer elemento, después de lo cual se elimina el último elemento. A la línea se le asigna la propiedad 'transición: margen' + opciones.velocidad + 'ms facilidad' , donde options.speed es la velocidad de animación, la facilidad es la función de animación. Ahora puedes desplazarte. La propiedad margen izquierda cambia suavemente de un valor negativo a cero, toda la regla se desplaza suavemente a la derecha y el último elemento viene primero. Después de microsegundos de options.speed , la línea recibe el valor anterior 'transición: ninguno' .

 var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed); 

Si necesita desplazarse n elementos al mismo tiempo, la permutación de los elementos se realiza en un bucle n veces, y la distancia margen izquierda aumenta n veces.

El desplazamiento hacia la izquierda (función elemNext ) ocurre en el orden inverso. Primero, la propiedad 'transición: margen' + opciones.velocidad + 'ms facilidad' se asigna a la línea this.crslList y la regla se desplaza suavemente hacia la izquierda ( crslList.style.marginLeft = '-' + elemWidth + 'px' ). Además, después de options.speed microsegundos, el primer elemento se clona y se inserta al final de la regla, después de lo cual se elimina el primer elemento. La regla devuelve el valor 'transición: ninguno'. Si necesita desplazar n elementos al mismo tiempo, la reorganización de elementos, como en el caso anterior, se realiza n veces en un bucle y la distancia margen izquierda aumenta n veces.

 var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed); 

Si la opción de ciclo está deshabilitada, en este caso no hay permutaciones de los elementos, y toda la línea de elementos se desplaza como un todo a la izquierda o derecha a sus puntos extremos. La línea de elementos this.crslList propiedad 'transición: margen' + opciones.velocidad + 'ms facilidad' se asigna incluso cuando el carrusel se inicializa y ya no se elimina.

El carrusel se llama por el nombre de la clase de carrusel de hormigas o por identificador. En el segundo caso, puede colocar varios carruseles en una página. Un archivo carousel index.html podría verse así:

 <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Ant-Carousel</title> <!--   --> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> <!--    --> … </div> … <footer> … </footer> <!--   --> <script src="ant-files/ant-carousel. js"></script> <!--   --> <script>new Ant()</script> </body> </html> 

Para colocar varios carruseles en una página, debe llamarlos por ID. Los diferentes carruseles pueden tener un número diferente de elementos.

 <div class="ant-carousel" id=”first”> <!--   --> … <div class="ant-carousel" id=”second”> <!--   --> … <script>new Ant("first"); new Ant("second");</script> 

Todas las imágenes son tomadas de fuentes abiertas.

Gracias por su atencion!