Complemento de control deslizante de imágenes Jquery. Ejemplos de controles deslizantes de imágenes JQuery gratuitos. RoyalSlider: galería de imágenes con pantalla táctil usando jQuery
El tiempo no se detiene y con él el progreso. Esto también afectó a Internet. Ya puedes ver cómo está cambiando. apariencia Los sitios web y el diseño responsivo son especialmente populares. En este sentido, los controles deslizantes adaptativos del sitio se han vuelto muy populares y relevantes. Han aparecido bastantes controles deslizantes, galerías y carruseles adaptables de jquery.
Si desea instalar un control deslizante universal o carrusel en su sitio web, puede ir a
Controles deslizantes para el sitio.1. Control deslizante de publicaciones horizontales responsivas
Carrusel horizontal adaptativo con instrucciones detalladas en la instalación. Está hecho en un estilo simple, pero puedes diseñarlo a tu gusto.
2. Control deslizante en Glide.js
Este control deslizante es adecuado para cualquier sitio web. Utiliza Glide.js de código abierto. Los colores del control deslizante se pueden cambiar fácilmente.
Controles deslizantes adaptativos para un sitio web con contenido. Lo más destacado de este slider es el efecto 3D de las imágenes, así como diferentes animaciones de apariencia aleatoria.
4. Control deslizante usando lienzo HTML5
Un control deslizante muy hermoso e impresionante con partículas interactivas. Fue hecho usando lienzo HTML5,
5. Control deslizante de transformación de imágenes
Control deslizante con efecto morphing. EN en este ejemplo El control deslizante es muy adecuado para el portafolio de un desarrollador web o estudio web en forma de portafolio.
6. Control deslizante circular
Control deslizante en forma de círculo con efecto de voltear la imagen.
7. Control deslizante con fondo borroso
Control deslizante responsivo con cambiar y desenfocar el fondo.
8. Control deslizante de moda responsivo
Control deslizante de sitio web simple, liviano y responsivo.
9. Slicebox - control deslizante de imágenes 3D jQuery (ACTUALIZADO)
Versión actualizada del control deslizante Slicebox con correcciones y nuevas funciones.
Complemento JQuery para crear una cuadrícula de imágenes flexible que cambiará las tomas usando diferentes animaciones y tiempos.
Controles deslizantes para el sitio, segunda parte.11.Control deslizante flexible
Un complemento universal gratuito para su sitio web. Este complemento viene en varias opciones de control deslizante y carrusel.
12. Marco de fotos
Fotorama es un complemento universal. Tiene muchas configuraciones. Todo funciona de forma rápida y sencilla, y también puedes ver las diapositivas en pantalla completa. El control deslizante se puede utilizar tanto en tamaño fijo como adaptable, con o sin miniaturas, con o sin desplazamiento circular, y mucho más. Con un marco de fotos, puede crear controles deslizantes adaptativos interesantes para su sitio web.
PD Instalé el control deslizante varias veces y creo que es uno de los mejores.
13. Galería deslizante 3D gratuita y adaptable con miniaturas.
Galería de controles deslizantes experimental 3DPanelLayout con una cuadrícula e interesantes efectos de animación.
14. Control deslizante en css3
El control deslizante adaptativo se crea utilizando css3 con una apariencia suave del contenido y una animación ligera.
es un control deslizante de imágenes con increíble efectos visuales y animaciones.
17. elástico
Control deslizante elástico con total capacidad de respuesta y miniaturas de diapositivas.
18. hendidura
Este es un control deslizante que responde a pantalla completa y utiliza animación CSS3. El control deslizante se realiza en dos versiones y la animación es bastante inusual.
19. Galería de fotos adaptable plus
Un simple control deslizante de galería gratuito con carga de imágenes.
20. Control deslizante responsivo para WordPress
Control deslizante responsivo y gratuito para WP.
21. Control deslizante de contenido de paralaje
Slider con efecto parallax y control de cada elemento mediante CSS3.
22. Control deslizante con enlace de música.
Control deslizante usando abierto código fuente JPlayer. Este control deslizante se parece a una presentación con música.
Controles deslizantes para el sitio, tercera parte.23. Control deslizante con jmpress.js
El control deslizante responsivo se basa en jmpress.js y, por lo tanto, le permitirá agregar algunos efectos 3D interesantes a sus diapositivas.
24. Presentación de diapositivas con desplazamiento rápido
Presentación de diapositivas con cambio rápido diapositivas. Las diapositivas cambian al pasar el mouse.
Imagen de acordeón usando css3.
Esta es una galería responsiva optimizada para dispositivos táctiles.
29.Montaje de imágenes con jQuery
Organice automáticamente las imágenes según el ancho de la pantalla. Algo muy útil e interesante a la hora de desarrollar un sitio web de cartera.
33. Mapa fotográfico de varios niveles.
Este es un mapa de varios niveles: una galería de imágenes le permite mostrar imágenes asociadas con su ubicación. Esta basado mapas de Google. El lado derecho muestra una miniatura de la imagen que se puede ver en un cuadro de luz al hacer clic en ella.
34. Galería de pantalla completa con miniaturas.
Galería de controles deslizantes adaptables con miniaturas y descripción de diapositivas.
Los controles deslizantes del sitio se actualizan constantemente y su número aumenta cada día. Si tienes tus controles deslizantes favoritos o quizás no encontraste lo que buscabas, escribe en los comentarios e intentaré ayudarte.
El tiempo no se detiene y con él el progreso. Esto también afectó a Internet. Ya puedes ver cómo está cambiando la apariencia de los sitios web; el diseño adaptativo es especialmente popular. Y en este sentido, han aparecido bastantes nuevos controles deslizantes, galerías, carruseles o complementos similares de jquery adaptativos.
1. Control deslizante de publicaciones horizontales responsivas
Carrusel horizontal adaptativo con instrucciones detalladas de instalación. Está hecho en un estilo simple, pero puedes diseñarlo a tu gusto.
2. Control deslizante en Glide.js
Este control deslizante es adecuado para cualquier sitio web. Utiliza Glide.js de código abierto. Los colores del control deslizante se pueden cambiar fácilmente.
3. Presentación de diapositivas de contenido inclinado
Control deslizante de contenido responsivo. Lo más destacado de este slider es el efecto 3D de las imágenes, así como diferentes animaciones de apariencia aleatoria.
4. Control deslizante usando lienzo HTML5
Un control deslizante muy hermoso e impresionante con partículas interactivas. Fue hecho usando lienzo HTML5,
5. Control deslizante de transformación de imágenes
Control deslizante con efecto de transformación (transformación suave de un objeto a otro). En este ejemplo, el control deslizante es muy adecuado para el portafolio de un desarrollador web o estudio web en forma de portafolio.
6. Control deslizante circular
Control deslizante en forma de círculo con efecto de voltear la imagen.
7. Control deslizante con fondo borroso
Control deslizante adaptativo con cambio y desenfoque de fondo.
8. Control deslizante de moda responsivo
Control deslizante de sitio web simple, liviano y responsivo.
9. Slicebox - control deslizante de imágenes 3D jQuery (ACTUALIZADO)
Versión actualizada del control deslizante Slicebox con correcciones y nuevas funciones.
10.Cuadrícula de imágenes responsiva animada gratuita
Complemento JQuery para crear una cuadrícula de imágenes flexible que cambiará las tomas usando diferentes animaciones y tiempos. Esto puede quedar bien como fondo o elemento decorativo en una web, ya que de forma selectiva podemos aparecer nuevas imágenes y sus transiciones. El complemento viene en varias versiones.
11.Control deslizante flexible
Un complemento universal gratuito para su sitio web. Este complemento viene en varias opciones de control deslizante y carrusel.
12. Marco de fotos
Fotorama es un complemento universal. Tiene muchas configuraciones, todo funciona de forma rápida y sencilla y puedes ver las diapositivas en pantalla completa. El control deslizante se puede utilizar tanto en tamaño fijo como adaptable, con o sin miniaturas, con o sin desplazamiento circular, y mucho más.
PD Instalé el control deslizante varias veces y creo que es uno de los mejores.
13. Galería deslizante 3D gratuita y adaptable con miniaturas.
Galería de controles deslizantes experimental 3DPanelLayout con una cuadrícula e interesantes efectos de animación.
14. Control deslizante en css3
El control deslizante adaptativo se crea utilizando css3 con una apariencia suave del contenido y una animación ligera.
15. Control deslizante WOW
WOW Slider es un control deslizante de imágenes con sorprendentes efectos visuales.
17. elástico
Control deslizante elástico con total capacidad de respuesta y miniaturas de diapositivas.
18. Hendidura
Este es un control deslizante que responde a pantalla completa y utiliza animación CSS3. El control deslizante se fabrica en dos versiones. La animación está realizada de forma bastante inusual y hermosa.
19. Galería de fotos adaptable plus
Un simple control deslizante de galería gratuito con carga de imágenes.
20. Control deslizante responsivo para WordPress
Control deslizante gratuito adaptativo para WP.
21. Control deslizante de contenido de paralaje
Slider con efecto parallax y control de cada elemento mediante CSS3.
22. Control deslizante con enlace de música.
Control deslizante utilizando código fuente abierto JPlayer. Este control deslizante se parece a una presentación con música.
23. Control deslizante con jmpress.js
El control deslizante responsivo se basa en jmpress.js y, por lo tanto, le permitirá agregar algunos efectos 3D interesantes a sus diapositivas.
24. Presentación de diapositivas con desplazamiento rápido
Presentación de diapositivas con cambio rápido de diapositivas. Las diapositivas cambian al pasar el mouse.
25. Acordeón de imágenes con CSS3
Imagen de acordeón usando css3.
26. Un complemento de galería táctil optimizado
Esta es una galería responsiva optimizada para dispositivos táctiles.
27. Galería 3D
Galería de pared 3D: creada para Navegador Safari, donde será visible el efecto 3D. Si lo miras en otro navegador, la funcionalidad estará bien pero el efecto 3D no será visible.
28. Control deslizante con paginación.
Control deslizante responsivo con paginación usando el control deslizante JQuery UI. La idea es utilizar un concepto de navegación simple. Es posible rebobinar todas las imágenes o cambiar diapositiva por diapositiva.
29.Montaje de imágenes con jQuery
Organice automáticamente las imágenes según el ancho de la pantalla. Algo muy útil a la hora de desarrollar un sitio web de cartera.
30. Galería 3D
Un control deslizante circular 3D simple que usa css3 y jQuery.
31. Modo de pantalla completa con efecto 3D usando css3 y jQuery
Un control deslizante con la capacidad de ver imágenes en pantalla completa con una hermosa transición.
Hola queridos lectores del blog. Hoy les presento selección útil controles deslizantes jQuery gratuitos con ejemplos. Si aún decide poner un control deslizante de imágenes en su recurso, esta selección le resultará muy útil y, créame, tiene mucho para elegir. Además, todos los controles deslizantes tienen ejemplos y puedes probar cada uno de ellos en acción. En general, no te distraeré, elige :-)
Control deslizante de imagen jQuery simpleEl control deslizante de miniaturas más común y pequeño de su sitio.
Control deslizante de miniaturas en JQueryUn control deslizante con miniaturas muy simple e interesante que se adapta a casi cualquier diseño.
Un control deslizante de imágenes grande y muy bonito, con interesante desplazamiento de texto.
El control deslizante más común y sencillo para su recurso
Un slider espectacular que es imposible pasar por alto.
Espere y elegante control deslizante de texto con imágenes y con hermoso efecto volteando.
Interesante desplazamiento de imágenes que se desplaza de forma continua y fluida. Por defecto hay imágenes de diferentes frutas, que puedes cambiar por las tuyas.
Un control deslizante interesante con grandes flechas rosas que cambian de tamaño al ampliar la imagen.
SliderPro es un control deslizante jQuery responsivo con soporte para miniaturas y otras configuraciones, incluida su propia API.
- El control deslizante se ajusta al tamaño de la pantalla de forma predeterminada. No solo se escalarán las imágenes, sino también las capas con su contenido adicional.
- Compatibilidad con eventos táctiles y deslizables para pantallas táctiles. Uso de puntos de interrupción, un análogo de las consultas de medios CSS, para cambiar la configuración del control deslizante a varios tamaños pantalla.
- Animación fluida mediante transiciones css3, animación de capas, efecto de desvanecimiento para cambiar de diapositiva.
- El control deslizante puede ocupar todo el ancho de la página, toda la pantalla o estar ubicado dentro de un contenedor.
- Cambio automático de altura de diapositiva. La orientación de las vistas previas puede ser vertical u horizontal.
- Las imágenes admiten carga diferida, retina y la capacidad de cargar diferentes imágenes para tamaños de pantalla específicos.
- Soporte de video, integración de lightbox, navegación con flechas, puntos, teclado, miniaturas y mucho, mucho más.
Incluya el archivo de estilo:
HTML
Marcado de ejemplo para insertar un control deslizante:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit ametconsectetur élite adipisicing
jsConectamos los scripts necesarios:
Inicializamos el complemento:
jQuery(documento).ready(function($) ( $("#my-slider").sliderPro(); ));
Se pueden encontrar más detalles sobre el control deslizante y su uso en Github. Enlace debajo.
En este artículo, veremos con qué facilidad se puede crear un control deslizante adaptativo para un sitio web utilizando CSS Flexbox y transformaciones CSS.
Códigos fuente del control deslizante y demostraciónUn proyecto de control deslizante llamado chiefSlider se encuentra en GitHub. Puedes acceder a él mediante este enlace.
Control deslizante con una diapositiva activa (sin bucle):
Control deslizante con tres diapositivas activas (sin bucle):
Un ejemplo que muestra cómo se puede utilizar un control deslizante para rotar artículos:
Ventajas de chiefSlider Enumeremos las principales ventajas de este control deslizante:
- en primer lugar, no crea clones de elementos para organizar los bucles, como se implementa, por ejemplo, en OwlCarousel y en los complementos slick;
- en segundo lugar, no depende de la biblioteca jQuery; esto no sólo elimina requisitos adicionales, sino que también lo hace más fácil;
- en tercer lugar, prácticamente no realiza cambios en el DOM del documento; lo único que hace es agregar o cambiar valores de transformación CSS para elementos deslizantes;
- en cuarto lugar, contiene sólo un conjunto mínimo de funciones; se pueden agregar funciones adicionales según la tarea;
- en quinto lugar, es adaptativo, es decir se puede utilizar en cualquier sitio web; La adaptabilidad del control deslizante se configura mediante CSS;
- sexto, el número de elementos activos se ajusta mediante CSS; esto significa que se puede utilizar para crear un carrusel con una diapositiva activa o cualquier cantidad de ellas.
La instalación del control deslizante requiere 3 pasos:
- agregue el CSS chiefSlider a la página o a un archivo CSS conectado a la página;
- coloque el código HTML del control deslizante en el lugar requerido de la página;
- inserte código JavaScript en la página o en un archivo js conectado a la página.
Es recomendable minimizar el código CSS y JavaScript; esta acción asegurará una carga más rápida de la página.
Cómo desarrollar un control deslizante simple para un sitio web (sin bucles)La creación del chiefSlider consistirá en crear código HTML, CSS y JavaScript (sin jQuery).
Código HTML para el control deslizante chiefSlider:
Como puede ver, el control deslizante tiene una arquitectura HTML muy simple. Comienza con el bloque principal, que tiene una clase deslizante. Este bloque consta de 3 elementos.
El primer elemento es .slider__wrapper. Actúa como un contenedor para elementos .slider__item (diapositivas).
Los dos elementos restantes (.slider__control) representan visualmente botones. Se utilizarán para navegar por la diapositiva, es decir. pasar a los elementos anteriores y siguientes.
jefeSlider código CSS:
/* ESTILOS PRINCIPALES */ .slider ( posición: relativa; desbordamiento: oculto; ) .slider__wrapper ( display: flex; transición: transformación 0.6s facilidad; /* 0.6 duración del cambio de diapositiva en segundos */ ) .slider__item ( flex: 0 0 50%; /* define el número de diapositivas activas (en este caso 2 */ max-width: 50%; /* define el número de diapositivas activas (en este caso 2 */ ) /* ESTILOS PARA BOTONES ATRÁS Y ADELANTE * / .slider__control ( posición: absoluta; mostrar: ninguno; arriba: 50%; transformar: traducirY(-50%); align-items: center; justify-content: center; text-align: center; ancho: 40px; /* ancho del botón */ alto: 50px; /* alto del botón */ opacidad: .5; /* transparencia */ fondo: #000; /* color de fondo */ .slider__control_show (pantalla: flex; ) .slider__control:hover, . :focus (decoración de texto: ninguna; contorno: 0; opacidad: .9; /* transparencia */ ) .slider__control_left ( izquierda: 0; ) .slider__control_right ( derecha: 0; ) .slider__control::before ( contenido: " " ; mostrar: bloque en línea; ancho: 20px; /* ancho del icono (flecha) */ altura: 20px; /* altura del icono (flecha) */ fondo: centro transparente sin repetición centro; tamaño de fondo: 100% 100%; ) .slider__control_left::before ( imagen de fondo: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( imagen de fondo: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )
Como puede ver, el código CSS para el control deslizante tampoco es muy complicado. Las definiciones principales con las que puede personalizar la apariencia del control deslizante se proporcionan con comentarios.
Código CSS que determina el número de elementos activos:
/* define el número de diapositivas activas (en este caso 2) */ flex: 0 0 50%; ancho máximo: 50%;
Este código establece el número de elementos activos para el control deslizante en 2.
Para que un control deslizante, por ejemplo, tenga un elemento activo, estas definiciones deben cambiarse a lo siguiente:
/* define el número de diapositivas activas (en este caso 1) */ flex: 0 0 100%; ancho máximo: 100%;
La creación de un control deslizante adaptativo se realiza mediante consultas de medios.
Por ejemplo, un control deslizante, que en dispositivos con una pantalla pequeña debería tener un control deslizante activo y en los grandes, cuatro:
Slider__item (flex: 0 0 100%; ancho máximo: 100%; ) @media (ancho mínimo: 980px) ( .slider__item (flex: 0 0 25%; ancho máximo: 25%; ) )
Código JavaScript para el control deslizante chiefSlider:
"uso estricto"; var multiItemSlider = (función () ( función de retorno (selector) ( var _mainElement = document.querySelector(selector), // elemento del bloque principal _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // contenedor para.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // elementos (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // controles _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // " Botón IZQUIERDA" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // Botón "DERECHA" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ancho del contenedor _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / ancho de un elemento _positionLeftItem = 0, // posición del elemento activo izquierdo _transform = 0, // valor de transformación.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // tamaño del paso (para transformación) _items = // matriz de; elementos // llenando la matriz _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); )); var posición = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = función (dirección) ( if (dirección === "derecha") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= posición .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step if (dirección === "izquierda") ( if (_positionLeftItem position.getMax() ) ( nextItem = position.getItemMin(); _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + " %)"; ) _transform -= _step; ) if (dirección === "izquierda") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) { nextItem = position.getItemMax(); _items.position = position.getMin() - 1; _items.transform -= _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; } _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; }
De hecho, aquí todo es sencillo.
Por ejemplo, para pasar a la siguiente diapositiva, primero se busca en la matriz de elementos un elemento con una posición mayor que la del elemento actual más a la derecha.slider__item.
Si existe dicho elemento en la matriz, entonces se realiza la transformación element.slider__wrapper (es decir, acciones, como en el algoritmo sin bucle).
Pero si no existe tal elemento, además de transform.slider__wrapper, se realizan otras acciones. Primero, se busca en la matriz de elementos el elemento con la posición mínima. Después de recibir este elemento, se establece su posición, cuyo valor será igual al valor del elemento derecho actual + 1. Y por supuesto, su transformación se realiza en tal porcentaje que acaba al final, es decir. después del último elemento.
Para pasar a la diapositiva anterior se realizan acciones similares, pero a la inversa.
Además, para un control deslizante en bucle, no es necesario alternar la visibilidad de los botones Izquierda y Derecha. Estos botones en esta versión del control deslizante siempre se mostrarán.
Para hacer esto necesitas:
- elimine la clase slider__control_show del control "Derecho";
- en el CSS para selector.slider__control cambie el valor de la propiedad de visualización a flex .
Puede programar cambios automáticos de diapositivas en ciertos intervalos usando la función setInterval.
Var _ciclo = función (dirección) ( if (!_config.isCycling) ( retorno; ) _interval = setInterval(función () ( _transformItem(dirección); ), _config.interval); )
La función setInterval en este ejemplo ejecutará la función _transformItem en intervalos especificados iguales al valor de la variable _config.interval.
Además, es recomendable añadir una parada al cambio automático de diapositivas cuando mueves el cursor al control deslizante.
Puede implementar esta funcionalidad de la siguiente manera:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", función () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", función () ( clearInterval(_interval); _cycle( _config.dirección);
¿Cómo detener el cambio automático de diapositivas si el elemento no es visible para el usuario?Es recomendable desactivar el cambio automático de diapositivas en dos casos:
- cuando la página (en la que se encuentra este control deslizante) está inactiva;
- cuando el control deslizante está fuera del área de visibilidad de la página.
El primer caso se puede manejar utilizando el evento de cambio de visibilidad.
Document.addEventListener("cambio de visibilidad", _handleVisibilityChange, falso);
Función para el controlador de eventos de cambio de visibilidad:
// manejando el evento "Cambios de visibilidad del documento" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )
El cálculo de la visibilidad de un elemento se puede realizar utilizando la función _isElementVisible:
Función _isElementVisible(elemento) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = función (x, y) ( devolver document.elementFromPoint(x, y) si (rect.right);< 0 || rect.bottom < 0 || rect.left >vAncho || rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || elemento.contains(elemFromPoint(rect.left, rect.bottom))); )
Puede colocar la llamada _isElementVisible, por ejemplo, al comienzo de la función _transformItem. Esta acción cancelará la transición automática de diapositivas si el control deslizante se encuentra actualmente fuera de la ventana gráfica.
Var _transformItem = función (dirección) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Control deslizante que responde al cambio de tamaño de la ventana del navegadorEsta versión del control deslizante adaptativo se diferencia de las anteriores en que le permite cambiar la cantidad de elementos activos (diapositivas) al cambiar el tamaño de la ventana del navegador. Los usuarios normalmente no cambian el tamaño de su navegador, pero aún así puede suceder.
Esto se implementa utilizando el evento de cambio de tamaño y la matriz _states. La matriz se utiliza para los cálculos. Su uso le permitirá evitar reiniciar el control deslizante cuando no sea necesario.