hogar /
Instalacion y configuracion/ El control deslizante más simple. Control deslizante táctil jQuery con capacidad de respuesta simple
El control deslizante más simple. Control deslizante táctil jQuery con capacidad de respuesta simple
Un control deslizante simple y liviano (21 Kb comprimido) escrito en Javascript puro, sin dependencias, es decir, funciona sin jQuery.
Probado en los siguientes navegadores:
Chrome 26.0
Firefox 20.0
Safari 5.1.7
IE 10
Opera 16.0
Hay soporte incompleto para IE8 / 9 (sin efectos).
Peculiaridades
Puede agregar un número ilimitado de controles deslizantes a la página, incluso colocar uno dentro del otro.
Cambia el tamaño según el contenido, pero se puede desactivar.
Navegación con el teclado: cuando el cursor está en el control deslizante, puede alternar los controles deslizantes de flecha.
Soporte para eventos táctiles móviles.
Conexión
Antes de la etiqueta de cierre
Necesito conectar slidr.js o slidr.min.js expediente.
Marcado HTML
slidr.js puede trabajar con cualquier elemento de bloque en línea, bloque en línea, que tenga un atributo id. Se permite utilizar cualquier elemento hijo de primer nivel con el atributo data-slidr, por ejemplo:
manzana
Plátano
Coco
manzana
Plátano
Coco
Javascript
Después de conectar slidr.js el objeto slidr global estará disponible. La forma más sencilla de crear un slidr es:
Slidr.create ("slidr-id"). Inicio ();
Llamar con todas las configuraciones especificadas:
El espacio de nombres global slidr proporciona las siguientes funciones:
/ ** * Versión actual * @return (string) major.minor.patch. * / versión de función () (); / ** * Efectos de transición disponibles. * @return (Matriz) de transiciones. * / función transiciones () (); / ** * Crea y devuelve Slidr. * Llamar a esta función dos veces en el mismo elemento devolverá el objeto Slidr ya creado. * ID de elemento @param (cadena) para Slidr. * @param (Object =) opt_settings Configuración del control deslizante. * / function crear (id, opt_settings) ();
API deslizante
// Inicializar Slidr con configuraciones personalizadas var s = slidr.create ("slidr-api-demo", (breadcrumbs: true, overflow: true)); // Agrega diapositivas horizontales con un efecto de transición estándar. // el elemento de matriz duplicado "uno" al final permite a Slidr // desplazarse por las diapositivas sin cesar s.add ("h", ["uno", "dos", "tres", "uno"]); // Agrega una diapositiva vertical con un efecto de transición de cubo. s.add ("v", ["cinco", "cuatro", "tres", "cinco"], "cubo"); // Ejecuta el control deslizante. s.start ();
La lista completa de funciones de la API de Slidr.js se presenta a continuación.
/ ** * ¡Inicie Slidr! * Encuentra automáticamente diapositivas para crear si no se agregó nada antes de llamar a start (). * @param (cadena) opt_start `data-slidr` id para comenzar. * @return (esto) * / function start (opt_start) (); / ** * Compruebe si podemos deslizarnos. * @param (cadena) junto a una dirección ("arriba", "abajo", "izquierda", "derecha") o una identificación `data-slidr`. * @return (booleano) * / function canSlide (siguiente) (); / ** * ¡Diapositiva! * @param (cadena) junto a una dirección ("arriba", "abajo", "izquierda", "derecha") o una identificación `data-slidr`. * @return (esto) * / function slide (siguiente) (); / ** * Agrega un conjunto de diapositivas. * @param (cadena) dirección `horizontal || h` o `vertical || v`. * @param (Array) ids Una lista de `data-slidr` id" s para agregar a Slidr. Las diapositivas deben ser hijos directos de Slidr. * @param (string =) opt_transition La transición para aplicar entre las diapositivas, o usos el predeterminado. * @param (boolean =) opt_overwrite Si se deben sobrescribir las asignaciones / transiciones de diapositivas existentes si ocurren conflictos. * @return (this) * / function add (direction, ids, opt_transition, opt_overwrite) (); / ** * Automáticamente avanzar a la siguiente diapositiva después de un cierto tiempo de espera. Las llamadas comienzan () si aún no se han llamado. * @param (int =) opt_msec El número de milisegundos entre cada transición de diapositiva. El valor predeterminado es 5000 (5 segundos). * @param (string = ) opt_direction "arriba", "abajo", "izquierda" o "derecha". El valor predeterminado es "derecha". * @param (string =) opt_start La identificación de `data-slidr` para comenzar (solo funciona si se llama auto para iniciar el Slidr). * @return (this) * / function auto (opt_msec, opt_direction, opt_start) (); / ** * Detener la transición automática si está activado. * @return (esto) * / function stop () (); / ** * Establecer tiempos de animación personalizados. * @param (cadena | Objeto) transición O un nombre de transición (es decir, "cubo"), o un objeto ("transición": "temporización"). * @param (string =) opt_timing El nuevo tiempo de animación (es decir, "entrada fácil de 0,5 s"). No es necesario si la transición es un objeto. * @return (esto) * / function timing (transición, opt_timing) (); / ** * Alternar ruta de navegación. * @return (esto) * / function breadcrumbs () (); / ** * Alternar controles. * @param (string =) opt_scheme Activar / desactivar si no está presente, de lo contrario cambiar el diseño. "borde", `esquina` o` ninguno`. * @return (esto) * / controles de función (opt_scheme) ();
Desplazarse por la página mientras cambia las diapositivas
Este desagradable error aparece en algunos navegadores. Para solucionarlo, debe agregar un estilo al cuerpo:
Cuerpo (desbordamiento: oculto;)
Cambio de tamaño dinámico
Slidr "comprende" si es necesario cambiar el tamaño del control deslizante para que se ajuste a la imagen. Si el bloque deslizante tiene dimensiones especificadas, Slidr no las cambiará automáticamente. Si se especifican las propiedades min-width y min-height, el control deslizante cambiará de tamaño para adaptarse al contenido, teniendo en cuenta estos valores. De lo contrario, el tamaño se realizará automáticamente.
Cambio de tamaño automático
bien
precioso
increíble
Dimensiones estáticas
bien
precioso
increíble
Controles deslizantes
El marcado de los controles es el siguiente:
Puede personalizar cualquier control deslizante mediante selectores CSS:
Aparte .slidr-control.right (width: 50px! Important; height: 50px! Important; top: 50%! Important; margin-top: -25px! Important; right: -25px! Important; border-radius: 25px; background : url ("/ static / images / arrow_right.png") 14px 13px negro sin repetición; opacidad: 0.4;) a un lado .slidr-control.right: hover (opacidad: 1;)
El control de flecha se implementa con el pseudo selector: after, por lo que para ocultarlo, use el siguiente código:
// Ocultar una sola flecha dentro de un solo controlador. aparte .slidr-control.right: after (border-color: transparent! important;) // Ocultar todas las flechas dentro de un solo controlador. aparte .slidr-control: after (border-color: transparent! important;) // Ocultar todas las flechas Slidr. aparte .slidr-control: after (border-color: transparent! important;)
Pan rallado Slidr
Las migas de pan tienen un marcado HTML simple. Cada ul representa una línea completa y cada li representa una ruta de navegación separada:
Diseñar migas de pan con CSS:
// Personaliza la posición, el tamaño, el color del borde y el color de fondo. aparte (derecha: 50%! importante; margen-derecha: -41px! importante;) aparte .slidr-breadcrumbs li (ancho: 15px! importante; alto: 15px! importante; margen: 3px! importante;) aparte .slidr-breadcrumbs li.normal (color de borde: blanco! importante;) aparte .slidr-breadcrumbs li.active (color de fondo: negro! importante;)
Licencia
Este software es de uso gratuito bajo la licencia MIT.
Del autor: A pesar de los rumores sobre la supuesta "muerte" de la parte de las páginas web visibles sin scroll, la necesidad de un buen slider no ha desaparecido por ningún lado. Seamos honestos, solo por un segundo: los controles deslizantes son divertidos. Además, nada más, a diferencia del contenido en movimiento, provoca que el usuario tenga un efecto "sorpresa". Todos los controles deslizantes son un conjunto de varias diapositivas que se reemplazan entre sí y es imperativo que el código del control deslizante sea lo más ligero posible. Aquí es donde jQuery resulta útil.
Eche un vistazo a 20 controles deslizantes jQuery de Envato Market y verá que hay controles deslizantes que son más que un bloque de imágenes que cambian suavemente.
1. RoyalSlider: galería de imágenes con pantalla táctil en jQuery
Un control deslizante sensible que también es táctil significa mucho más ahora de lo que solía ser. RoyalSlider combina la capacidad de respuesta y la funcionalidad de la pantalla táctil. Buena elección ya que la galería está escrita en HTML5 y CSS3.
Varias características interesantes:
JavaScript. Comienzo rápido
Optimización SEO
Alta personalización
Más de 10 plantillas de inicio
Hay un respaldo para las transiciones CSS3
En mi opinión, la característica más interesante es la "arquitectura de script modular", que le permite excluir cosas innecesarias del archivo JS principal, reduciendo así el peso. RoyalSlider, una pantalla táctil de la galería de imágenes de jQuery, es un robusto control deslizante de JavaScript que debería ser imprescindible para la caja de herramientas de cualquier desarrollador.
2. Complemento de jQuery sensible a Slider Revolution
No es fácil hacer algo "revolucionario" con un control deslizante. Cuando se trata de controles deslizantes, hay tantas funciones que puede agregarles. Sin embargo, Slider Revolution es un buen intento. Entre los controles deslizantes de jQuery, esta instancia cumple con todos sus requisitos posibles.
La lista de funciones del control deslizante es muy larga, por lo que enumeraré solo las mejores:
Efecto de paralaje y animación personalizada
Capas y diapositivas ilimitadas con enlaces
Listo para usar, estilos profundamente personalizables.
y mucho más
La capacidad de agregar una imagen, un reproductor de video integrado y enlaces a redes sociales hacen de Slider Revolution una de las opciones más flexibles y personalizables de la web.
3. Complemento deslizante de jQuery sensible a LayerSlider
El nombre "Control deslizante del complemento jQuery sensible a LayerSlider" realmente no puede apreciar este control deslizante. Más de 200 transiciones de diapositivas en 2D y 3D harán girar la cabeza a cualquiera.
Un par de características notables:
13 skins y 3 tipos de menús
Posibilidad de colocar una imagen fija en la parte superior del control deslizante.
Y el respaldo de jQuery
Y mucho más
Al igual que con el control deslizante anterior, puede agregar casi cualquier contenido, incluso contenido multimedia residente en HTML5. LayerSlider da vida a los controles deslizantes y es muy bonito.
4.jQuery Banner Rotator / Presentación de diapositivas
jQuery Banner Rotator / Slideshow es un control deslizante bastante simple que no sacrifica la funcionalidad principal.
Posibilidades:
Información sobre herramientas, inserciones de texto, etc.
Vista previa y varias opciones para ver componentes
Temporizador con retraso para un control deslizante o para todos
Múltiples transiciones para todas las diapositivas o diferentes transiciones para cada una individualmente
jQuery Banner Rotator / Slideshow solo tiene características básicas en comparación con otros controles deslizantes de jQuery, pero no debe olvidarlo.
5. All In One Slider - Complemento de control deslizante jQuery receptivo
Cualquier control deslizante que aparece en la web tiene su propia visión única y resuelve cualquier problema en su área. Pero no este. All In One Slider se puede llamar "todo incluido".
Creo que la mayoría de los desarrolladores y diseñadores web tienen una solución probada, pero siempre están buscando algo nuevo. Y este "algo nuevo" incluye:
Rotador de banner
Banner con vista previa
Banner de lista de reproducción
Control deslizante de contenido
Carrusel
Todos los tipos de controles deslizantes admiten la mayoría, si no todas, las funciones que necesitan los controles deslizantes de jQuery. ¿Será All In One Slider tu todo incluido?
6. UnoSlider: control deslizante de pantalla táctil adaptable
Si su control deslizante no responde y no es compatible con pantallas táctiles, entonces tiene el control deslizante incorrecto. UnoSlider es correcto.
Este control deslizante ha encontrado su lugar bajo el sol entre la simplicidad y el rico conjunto de funciones. Funciones:
Soporte para temas
12 temas listos para usar
40 transiciones
Soporte IE6 +
Todas las funciones tienen un sesgo en el diseño y el estilo, lo que hace que UnoSlider sea un excelente control deslizante de contenido con la capacidad de agregar temas.
7.Master Slider - control deslizante de pantalla táctil jQuery
¿Está buscando "un control deslizante de jQuery para gobernarlos a todos"? Pruebe Master Slider: control deslizante de pantalla táctil jQuery para diferentes tamaños de pantalla ...
Cuando se trata de un buen diseño, este es uno de los mejores:
Más de 25 plantillas
Transiciones aceleradas por hardware
Soporte para toques y deslizamientos
Y mucho más
Las transiciones interactivas, las capas animadas y los puntos de acceso definitivamente llamarán su atención. Master Slider es una obra de arte.
8. TouchCarousel: desplazamiento y control deslizante de contenido de jQuery
TouchCarousel atrae con soporte y actualizaciones gratuitas. Sin embargo, estas no son todas las características de este deslizador de carrusel ligero de jQuery.
Si el nombre contiene la palabra "toque", puede adivinar que el control deslizante responde completamente y admite el tacto. Otras funciones:
Optimización SEO
Reproducción automática inteligente
Transiciones CSS3 aceleradas por hardware
Interfaz de usuario personalizable y 4 máscaras de Photoshop
TouchCarousel, debido a su desplazamiento de diapositivas físico único, es un nivel completamente nuevo de experiencia en dispositivos móviles.
Control deslizante avanzado: control deslizante XML de jQuery
Los controles deslizantes de jQuery se pueden usar no solo en sitios web. También pueden resultar útiles en aplicaciones web. Advanced Slider te permite hacer esto.
Con marcado HTML o XML, este control deslizante avanzado deja una impresión duradera:
Capas animadas y video inteligente
Más de 100 transiciones y más de 150 propiedades personalizadas
15 máscaras de control deslizante, 7 máscaras de barra de desplazamiento y compatibilidad con lightbox incorporada
Navegación por teclado, soporte táctil y personalización completa
Y mucho más
Sin embargo, la mejor característica es Advanced Slider, la API jQuery XML Slider, que hace que el control deslizante sea ideal para su aplicación web.
10.jQuery Slider Zoom In / Out Efecto Totalmente sensible
Uno de esos controles deslizantes de jQuery que te harán ver una demostración antes de comenzar a leer sobre sus capacidades. Solo desea comprender lo que significa este "efecto de acercar / alejar".
El efecto de zoom es bastante débil, pero agrega una sensación de control y un toque real a la imagen, mientras que el resto del control deslizante es estático. Características especiales del control deslizante:
Transiciones CSS3 entre capas
Opción de fin de animación para capas
Opciones de ancho fijo, pantalla completa y ancho completo
Texto animado con formato HTML y CSS
La mayoría de los controles deslizantes intentan incorporar tantos efectos como sea posible, y jQuery Slider Zoom In / Out Effect Fully Responsive solo tiene el efecto Ken Burns, pero está bien implementado.
11.jQuery Carousel Evolution
Al igual que el control deslizante avanzado mencionado anteriormente, el control deslizante jQuery XML, jQuery Carousel Evolution tiene su propia API que se puede utilizar para mejorar la funcionalidad o integrar el control deslizante en otro proyecto.
JavaScript. Comienzo rápido
Aprenda los conceptos básicos de JavaScript con un ejemplo práctico de cómo crear una aplicación web
Con imágenes, marcado HTML, videos de YouTube y Vimeo, también obtienes:
Optimización SEO
9 estilos de carrusel
Efectos de sombra y reflejo
El tamaño de la imagen se puede ajustar, tanto en el anverso como en el reverso
jQuery Carousel Evolution es un carrusel simple con muchos casos de uso.
12. Control deslizante sexy
Sexy Slider ya no es tan sexy como solía ser. Sin embargo, debido a su antigüedad, este control deslizante es confiable.
A primera vista, el control deslizante no es muy impresionante, pero si se configura bien, encajará perfectamente en su diseño. Posibilidades:
Diapositivas de reproducción automática
Leyendas de imagen
Reproducción continua de diapositivas
6 efectos de transición
Sexy Slider te está esperando para liberar todo su poder y potencial.
13.jQuery Image & Content Scroller w / Lightbox
Con todos estos diseños para dispositivos móviles y soporte para pantallas táctiles, es bueno ver un control deslizante de jQuery que no se ha olvidado de las computadoras de escritorio.
jQuery Image & Content Scroller con Lightbox admite entrada de teclado y rueda del mouse y otras características:
Orientación horizontal y vertical
Leyendas de texto dentro o fuera del control deslizante
Posibilidad de establecer un cierto número de diapositivas visibles a la vez
Imágenes en línea, Flash, iframes, Ajax y contenido en línea
El control deslizante también tiene una caja de luz incorporada. Si lo desea, en jQuery Image & Content Scroller w / Lightbox, no puede iniciar el control deslizante en sí, sino iniciar el lightbox por separado.
14. Translúcido: rotador / deslizador de banner receptivo
La mayoría de los controles deslizantes de jQuery tienen sus propios diseños. Puede personalizarlo usted mismo, pero a veces solo desea que todo esté dentro del control deslizante. Presentamos a su atención Translucent.
Hay muchos ajustes preestablecidos en el control deslizante. Quizás solo necesite configurar ciertos ajustes y eso es todo. Posibilidades:
6 estilos diferentes
4 efectos de transición
2 transiciones de deslizamiento
Botones y subtítulos personalizables
Como otros, este control deslizante es sensible al tacto, sensible y acelerado por hardware. Translucent es un control deslizante con un diseño minimalista que pone el contenido en sí mismo a la vanguardia.
15. FSS - Complemento de sitio web deslizante de pantalla completa
¿Quieres hacer un sitio de diapositivas a pantalla completa? Entonces necesitas FSS.
De hecho, es extremadamente fácil crear un sitio deslizante de pantalla completa con este deslizador jQuery. Posibilidades:
Soporte AJAX
Barra de desplazamiento
Soporte de tecnología de enlace profundo
2 efectos de transición diferentes
También vale la pena ver la compatibilidad con el teclado y una guía de 11 páginas. Sin embargo, la impresión real la causa el peso del FSS, solo 5Kb.
16.Zozo Accordion - Control deslizante de pantalla táctil adaptable
Otro ejemplo de un control deslizante de jQuery centrado en el estilo que hace un trabajo bastante bueno. El Acordeón Zozo es imprescindible para cualquiera que busque un buen acordeón deslizante con la capacidad de cambiar de estilo.
Esta belleza con la animación CSS3 también tiene una gama bastante amplia de características:
Acordeón horizontal y vertical
HTML5 semántico y optimización SEO
Soporte táctil, teclado y WAI-ARIA
Más de 10 máscaras y 6 diseños
Y mucho más
Zozo Accordion tiene soporte gratuito y actualizaciones constantes, y todas las funciones que desea ver en un acordeón jQuery.
17.jQuery Responsive OneByOne Slider Plugin
El complemento jQuery Responsive OneByOne Slider se parece más a una animación simple que a un control deslizante. En lugar de mostrar una diapositiva a la vez, esta instancia llena la pantalla con diapositivas paso a paso hasta que no hay espacio en el área antes de pasar a la siguiente diapositiva.
La animación CSS3 funciona desde Animate.css, es liviana, multicapa y compatible con dispositivos móviles. Varias funciones:
También hay una opción de navegación de arrastrar y soltar. jQuery Responsive OneByOne Slider Plugin funciona con el carrusel de Twitter Bootstrap.
18. Accordionza - complemento de jQuery
Ningún control deslizante de jQuery es más fácil que este. Solo necesita descargar un control deslizante de 3 KB para que funcione, lo que convierte al Accordionza en el control deslizante de acordeón más ligero de todos los tiempos.
Si no le gustan los tres estilos, puede modificar el HTML y CSS usted mismo. Posibilidades:
Navegación por teclado
Efectos y botones fáciles de personalizar
Técnica de mejora progresiva: funciona sin JavaScript
Recuerde que Accordionza puede mostrar una variedad de opciones de contenido mixto, lo que lo hace extremadamente flexible.
19.mightySlider - Control deslizante multiusos sensible
MightySlider es un control deslizante realmente poderoso. Se puede utilizar no solo como un control deslizante de imagen simple, sino también como un control deslizante unidireccional de pantalla completa con navegación a través de los elementos del menú. Puede ayudarlo a crear un excelente sitio web de una página.
Encontrarás muchas opciones debajo del capó:
Compatibilidad con teclado, mouse y toque
Transiciones CSS3 aceleradas por hardware
Marcado válido limpio y optimización SEO
Número ilimitado de diapositivas, capas para subtítulos y efectos para ellas.
La API es muy poderosa y amigable para los desarrolladores, lo que abre diferentes formas de usarla. MightySlider es un excelente control deslizante de jQuery progresivo con un código limpio y bien comentado.
20. Parallax Slider - Complemento de jQuery receptivo
Parallax Slider funciona como el complemento jQuery Responsive OneByOne Slider y le permite animar cada capa por separado dentro de una sola diapositiva. Puede animar todas las diapositivas o incluso solo una agregando animación de paralaje.
El set incluye 4 deslizadores de diferentes tipos, todos con efecto de paralaje. Al igual que otros controles deslizantes de jQuery, tiene:
Totalmente personalizable
Soporte táctil
Capas ilimitadas y con total capacidad de respuesta
Reproducción automática, bucle, ajuste de altura y ancho y temporizador
Las capas animadas no se tratan solo de texto o imágenes. También puede agregar videos de YouTube, Vimeo y HTML5. Parallax Slider es otro buen ejemplo de cómo puedes simular efectos Flash incluso mejor que el propio Flash, que también es compatible con todos los dispositivos.
Conclusión
Es interesante ver cómo los controles deslizantes de jQuery han pasado de ser algo que simplemente intercambia una imagen por otra, a un gran conjunto de herramientas creativas. Ahora hay controles deslizantes de paralaje en 3D, controles deslizantes de página completa, adaptables y los que se pueden ver tanto en computadoras de escritorio como en teléfonos inteligentes.
Si no le gusta ninguna de las diapositivas en esta lista, siempre puede tomar el Tutorial de código jQuery en Envato y desarrollar algo completamente nuevo y único.
O echa un vistazo a los otros controles deslizantes en Envato Market para ver una variedad de opciones. ¿Cuál es tu control deslizante de jQuery favorito y por qué?
Necesitamos un control deslizante simple con desplazamiento automático. Empecemos ...
Descripción del trabajo del control deslizante.
Las diapositivas se alinearán y desplazarán después de un cierto período de tiempo.
El marco rojo muestra la parte visible del control deslizante.
Al final del control deslizante, debe duplicar la primera diapositiva. Esto es necesario para garantizar el desplazamiento de la tercera diapositiva a la primera. También debe agregar la última diapositiva al principio para poder desplazarse hacia atrás desde la primera diapositiva hasta la tercera. A continuación se muestra cómo funciona el control deslizante en la dirección de avance.
Cuando el control deslizante llega al final, se coloca instantáneamente una copia desde el principio del control deslizante en lugar de la última diapositiva. Luego, el ciclo se repite nuevamente. Esto crea la ilusión de un control deslizante sin fin.
Marcado HTML
Primero, hagamos un control deslizante de desplazamiento automático simple. Necesita dos contenedores para funcionar. El primero establecerá el tamaño del área visible del control deslizante, y el segundo es necesario para colocar los controles deslizantes en él. El marcado del control deslizante se verá así:
El contenedor.slider-box establece las dimensiones del control deslizante. La propiedad overflow: hidden oculta todos los elementos que no caen dentro del área dentro del elemento.
El contenedor deslizante se establece en un ancho grande. Esto es necesario para que encajen todas las diapositivas.
Las diapositivas se alinean usando la propiedad float: left.
A continuación se muestra un diseño esquemático de los bloques deslizantes.
Texto
El movimiento de las diapositivas se realizará cambiando suavemente la propiedad de margen izquierdo del control deslizante del contenedor.
$ (función () (var ancho = $ (". cuadro-deslizador") .width (); // Ancho del control deslizante. intervalo = 4000; // Intervalo de cambio de diapositivas.$ (". slider img: last") .clone () .prependTo (".slider"); // Se coloca una copia de la última diapositiva al principio.$ () .eq (1) .clone () .appendTo (".slider"); // Se coloca una copia de la primera diapositiva al final.// Container.slider se desplaza hacia la izquierda un ancho de diapositiva. setInterval ("animación ()", intervalo); // Se inicia la función animation () para cambiar las diapositivas.)); function animation () (var margin = parseInt ($ (". slider") .css ("marginLeft")); // Desplazamiento actual del control deslizante del bloque width = $ (". slider-box") .width (), // Ancho del control deslizante. slidersAmount = $ (". slider") .children () .length; // El número de diapositivas en el control deslizante. si (margen! = (- ancho * (slidersAmount- 1))) // Si la diapositiva actual no es la última,(margen = margen-ancho; // entonces el valor del margen se reduce por el ancho de la diapositiva.) demás ( // Si se muestra la última diapositiva,$ (". slider") .css ("margin-left", - ancho); // luego el bloque deslizante vuelve a su posición inicial, margen = - ancho * 2; ) $ (". slider") .animate ((marginLeft: margin), 1000); // El bloque deslizante se desplaza 1 diapositiva hacia la izquierda.
}
;
El resultado es un control deslizante simple con desplazamiento automático infinito.
Para empezar, este artículo se escribió con el objetivo de decirle cómo crear un control deslizante de desplazamiento de imágenes para páginas web. Este artículo de ninguna manera es de naturaleza didáctica, solo sirve como un ejemplo de cómo se puede implementar nuestro objeto de consideración. Puede usar el código provisto en este artículo como una especie de plantilla para tales desarrollos, espero poder transmitir toda la esencia de lo que he escrito al lector con suficiente detalle y de manera accesible.
Y ahora, al grano, no hace mucho tiempo necesitaba colocar un control deslizante en un sitio, pero después de buscar en Internet scripts prefabricados, no encontré nada que valiera la pena. algunos no funcionaron como necesitaba, mientras que otros no se iniciaron en absoluto sin errores en la consola. Usar jQuery - complementos para el control deslizante, me pareció demasiado poco interesante, tk. Aunque resolveré el problema con esto, no comprenderé el funcionamiento de este mecanismo, y usar el complemento por el bien de un control deslizante no es muy óptimo. Tampoco quería entender los guiones torcidos, por eso decidí escribir mi propio guión para el control deslizante, que yo mismo marcaré según sea necesario.
Para empezar, debemos decidir la lógica del control deslizante en sí, y luego proceder a la implementación, en esta etapa es muy importante tener una comprensión clara del funcionamiento de este mecanismo, porque sin él no podemos escribir código que funciona exactamente como queremos.
Nuestro principal objeto será ventana gráfica, es decir, un bloque en el que veremos como van girando nuestras imágenes, en él tendremos envoltura de diapositivas, este será nuestro bloque que contendrá todas las imágenes, alineadas en una línea, y que cambiará su posición dentro del mismo ventana gráfica.
Además, en los lados del interior ventana gráfica, verticalmente en el medio, se ubicarán los botones de retroceso y avance, al hacer clic en los cuales también cambiaremos la posición de nuestro envoltura de diapositivas relativamente ventana gráfica, lo que provoca el efecto de desplazarse por las imágenes. Y finalmente, el último objeto serán nuestros botones de navegación ubicados en la parte inferior. ventana gráfica.
Al hacer clic en ellos, simplemente miraremos el número de serie de este botón y lo moveremos a la diapositiva que necesitemos, nuevamente desplazando envoltura de diapositivas(la compensación se realizará mediante un cambio transformar propiedades css, cuyo valor se calculará constantemente).
Creo que la lógica de todo este caso debería quedar clara después de lo que dije anteriormente, pero si todavía hay malentendidos en algún lugar, entonces todo se aclarará en el código a continuación, solo necesita un poco de paciencia.
¡Ahora escribamos! En primer lugar, abriremos nuestro archivo de índice y agregue el marcado que necesitamos allí:
Como ves nada complicado bloque-para-deslizador sirve como el mismo bloque en el que se colocará nuestro control deslizante, dentro de él mismo ventana gráfica en el que nuestro envoltura de diapositivas, también conocida como lista anidada, aquí li son diapositivas y img- imágenes en su interior. Preste atención al hecho de que todas las imágenes deben ser del mismo tamaño o, al menos, proporciones; de lo contrario, el control deslizante se verá torcido, tk. sus dimensiones dependen directamente de la relación de aspecto de la imagen.
Ahora tenemos que estilizar todo, generalmente los estilos no se comentan realmente, pero decidí llamar la atención sobre esto, para que no haya malentendidos en el futuro.
Empecemos con bloque-para-deslizador, Repito, este es nuestro bloque en la página, el cual dejaremos a un lado para el slider, su altura dependerá de su ancho y de las proporciones de nuestra imagen, ya que ventana gráfica ocupa todo el ancho bloque-para-deslizador entonces yo mismo diapositiva tiene el mismo ancho y, en consecuencia, la imagen en su interior cambia su altura dependiendo del ancho (se conservan las proporciones). Coloqué este elemento horizontalmente en el medio de mi página, rellenando 100px desde la parte superior, haciendo que su posición sea más conveniente para un ejemplo.
Elemento ventana gráfica, como ya se mencionó, ocupa todo el ancho de nuestro bloque-para-deslizador, tiene la propiedad desbordamiento: oculto, nos permitirá ocultar nuestro feed de imágenes, que saldrá de la ventana gráfica.
Siguiente propiedad css - selección de usuario: ninguna, le permite deshacerse de la selección azul de elementos deslizantes individuales con varios clics en los botones.
Moviéndose a envoltura de diapositivas por qué posición: relativa, pero no absoluto? Todo es muy simple, tk. si elegimos la segunda opción, entonces con la propiedad desbordamiento de la ventana gráfica: oculto absolutamente nada nos parecerá, tk. yo mismo ventana gráfica no se ajustará a la altura envoltura de diapositivas, por lo que tendré altura: 0... ¿Por qué es tan importante el ancho y por qué lo configuramos? El punto es que nuestras diapositivas tendrán un ancho igual a 100% de la ventana gráfica, y para organizarlos en una línea, necesitamos un lugar donde se colocarán, por lo tanto, el ancho envoltura de diapositivas debería ser igual Ancho de la ventana gráfica del 100% multiplicado por el número de diapositivas (en mi caso, 4). Sobre transición y función de tiempo de transición entonces aqui 1 s significa que el cambio de posición envoltura de diapositivas ocurrirá en 1 segundo y lo observaremos, y facilidad de entrada- el tipo de animación en la que va lentamente al principio, acelera hacia el medio y luego vuelve a disminuir, aquí ya puede establecer los valores a su discreción.
El siguiente bloque de conjuntos de propiedades envoltura de diapositivas y sus hijos tienen relleno de ceros, los comentarios son innecesarios aquí.
A continuación, aplicaremos estilo a nuestras diapositivas, su ancho debe ser igual al ancho. ventana gráfica, pero desde ellos están en envoltura de diapositivas, cuyo ancho es igual al ancho de la ventana gráfica multiplicado por el número de diapositivas, luego para obtener el ancho ventana gráfica de nuevo, necesitamos el 100% del ancho envoltura de diapositivas dividir por el número de diapositivas (en mi caso, nuevamente, por 4). Luego los convertimos en elementos en línea usando pantalla: en línea y establezca el flujo a la izquierda agregando la propiedad flotador izquierdo... Sobre estilo de lista: ninguno Puedo decir que lo uso para eliminar el marcador predeterminado de li, en la mayoría de los casos es una especie de estándar.
Con slide-img todo es simple, la imagen ocupará todo el ancho diapositiva, diapositiva se ajusta a su altura, envoltura de diapositivas se ajusta a la altura diapositiva y la altura ventana gráfica a su vez tomará el valor de la altura envoltura de diapositivas, por lo tanto, la altura de nuestro control deslizante dependerá de las proporciones de la imagen y del tamaño del bloque proporcionado para el control deslizante, sobre el que ya escribí anteriormente.
Creo que aquí es donde descubrimos los estilos, hagamos una presentación de diapositivas simple sin botones por ahora, y después de asegurarnos de que funciona correctamente, agreguemos y diseñemos.
Abramos nuestro archivo js, que contendrá el código del control deslizante, no olvide incluir jQuery ya que escribiremos usando este marco. Por cierto, en el momento de escribir este artículo, estoy usando la versión jQuery 3.1.0... El archivo de secuencia de comandos en sí debe incluirse al final de la etiqueta. cuerpo ya que trabajaremos con los elementos DOM que deben inicializarse primero.
Por ahora, necesitamos declarar un par de variables, una almacenará el número de diapositiva que vemos en un momento determinado en ventana gráfica, La nombré slideNow, y el segundo almacenará el número de estas mismas diapositivas, esto es slideCount.
var slideNow = 1; var slideCount = $ ("# slidewrapper"). hijos (). longitud);
Variable slideNow es necesario establecer el valor inicial 1, porque cuando se cargue la página, nosotros, según nuestro marcado, veremos la primera diapositiva en ventana gráfica.
V slideCount pondremos el numero de niños envoltura de diapositivas, todo es lógico aquí. A continuación, debe crear una función que se encargará de cambiar las diapositivas de derecha a izquierda, declararla:
función nextSlide () ()
Lo llamaremos en el bloque principal de nuestro código, al que llegaremos, pero por ahora le diremos a nuestra función qué debe hacer:
Primero, verificamos si ahora estamos en la última diapositiva de nuestro feed. Para hacer esto, tomamos el número de todas nuestras diapositivas usando $ ("# slidewrapper"). children (). length y verifíquelo con el número de nuestra diapositiva, si resultan ser iguales, entonces esto significa que debemos comenzar a mostrar la cinta nuevamente, desde 1 diapositiva, lo que significa que cambiamos propiedad de transformación css a envoltura de diapositivas sobre traducir (0, 0), desplazándolo así a su posición original para que aparezca la primera diapositiva en nuestro campo de visión, no te olvides también de –Kit web y –ms para una visualización adecuada en todos los navegadores (consulte. referencia de propiedades CSS). Después de eso, no olvidemos actualizar el valor de la variable. slideNow, informándole que la diapositiva número 1 está en su campo de visión: slideNow = 1;
La misma condición incluye comprobar que el número de la diapositiva que vemos está dentro del número de nuestras diapositivas, pero si de alguna manera esto no se cumple, entonces volveremos a la 1ª diapositiva.
Si no se cumple la primera condición, entonces esto significa que en este momento no estamos en la última diapositiva, o en alguna inexistente, lo que significa que debemos cambiar a la siguiente, lo haremos cambiando envoltura de diapositivas a la izquierda por un valor igual al ancho ventana gráfica, el desplazamiento ocurrirá nuevamente a través de la propiedad familiar traducir cuyo valor será igual a "translate (" + translateWidth + "px, 0)", dónde translateWidth- la distancia que nuestro envoltura de diapositivas... Por cierto, declaremos esta variable al principio de nuestro código:
var translateWidth = 0;
Después de pasar a la siguiente diapositiva, dígale a nuestra slideNow que vemos la siguiente diapositiva: slideNow ++;
Por el momento, algunos lectores pueden tener una pregunta: ¿por qué no reemplazamos $ ("# viewport"). width () a alguna variable, por ejemplo slideWidth para tener siempre a mano el ancho de nuestro tobogán? La respuesta es muy simple, si nuestro sitio responde, entonces, en consecuencia, el bloque asignado para el control deslizante también es adaptativo, de esto se puede entender que al cambiar el tamaño del ancho de la ventana sin recargar la página (por ejemplo, girar el teléfono de lado), el ancho ventana gráfica cambiará y, en consecuencia, también cambiará el ancho de una diapositiva. En este caso, nuestro envoltura de diapositivas se desplazará por el valor del ancho original, lo que significa que las imágenes se mostrarán en partes o no se mostrarán en absoluto en ventana gráfica... Escribiendo a nuestra función $ ("# viewport"). width () en lugar de slideWidth hacemos que calcule el ancho cada vez que cambiamos de diapositiva ventana gráfica, proporcionando así un desplazamiento a la diapositiva deseada cuando el ancho de la pantalla cambia abruptamente.
Sin embargo, escribimos la función, ahora es necesario llamarla después de cierto intervalo de tiempo, también podemos almacenar el intervalo en una variable, de modo que si lo deseamos, podemos cambiarlo, cambiar solo un valor en el código:
Todo es más fácil en ninguna parte, estamos a través de la construcción. $ (documento) .ready (función () ()) Decimos que las siguientes acciones deben realizarse después de que el documento esté completamente cargado. Entonces simplemente llamamos a la función la siguiente diapositiva con un intervalo igual a slideInterval, usando la función incorporada setInterval.
Después de todas las acciones que realizamos anteriormente, nuestro control deslizante debería girar perfectamente, pero si algo salió mal contigo, entonces el problema puede estar en la versión jQuery, o en la conexión incorrecta de cualquier archivo. Además, no es necesario excluir que podría haber cometido un error en algún lugar del código, por lo que solo puedo aconsejarle que vuelva a verificar todo.
Mientras tanto, sigamos adelante, agreguemos a nuestro control deslizante una función como dejar de desplazarse al pasar el mouse, para esto necesitamos escribir en el bloque principal de código (dentro de $ (documento) .ready (function () ())) tal cosa:
Para comenzar a analizar este código, necesitamos saber qué es switchInterval... En primer lugar, esta es una variable que almacena una llamada periódica a la función nextSlide, en pocas palabras, usamos esta línea de código: setInterval (nextSlide, slideInterval);, convertido en esto: switchInterval = setInterval (nextSlide, slideInterval);... Después de estas manipulaciones, nuestro bloque principal de código tomó la siguiente forma:
Aquí estoy usando event flotar, que significa "al pasar el mouse", este evento me permite realizar un seguimiento del momento en el que coloco el cursor sobre un objeto, en este caso en ventana gráfica.
Después de pasar el mouse, borro el espacio, que indicaré entre paréntesis (este es nuestro switchInterval), luego, separados por comas, escribo lo que haré cuando mueva el cursor hacia atrás, en este bloque vuelvo a asignar a nuestro switchInterval llamada de función periódica la siguiente diapositiva.
Ahora, si lo comprobamos, veremos cómo reacciona nuestro control deslizante al pasar el mouse, deteniendo el cambio de diapositiva.
Ahora es el momento de agregar botones a nuestro control deslizante, comencemos con los botones de ida y vuelta.
Primero que nada, vamos a marcarlos:
Al principio, este marcado puede ser incomprensible, diré de inmediato que envolví estos dos botones en uno div con clase prev-next-btns solo para tu conveniencia, no tienes que hacer esto, el resultado no cambiará, ahora les agregaremos estilos y todo quedará claro:
# prev-btn, # next-btn (posición: absoluta; ancho: 50px; alto: 50px; color de fondo: #fff; radio del borde: 50%; arriba: calc (50% - 25px);) # anterior- btn: hover, # next-btn: hover (cursor: pointer;) # prev-btn (left: 20px;) # next-btn (right: 20px;)
Primero, colocamos nuestros botones a través de posición: absoluta, de ese modo controlaremos libremente su posición dentro de nuestra ventana gráfica, luego indicaremos los tamaños de estos botones y usando radio de borde redondee las esquinas para que estos botones se conviertan en círculos. Su color será el blanco, es decir #fff, y su sangría desde el borde superior ventana gráfica será igual a la mitad de la altura de este ventana gráfica menos la mitad de la altura del botón en sí (en mi caso 25px) para que podamos colocarlos verticalmente en el centro. A continuación, indicaremos que cuando pasemos el cursor sobre ellos, nuestro cursor cambiará a puntero y finalmente decirle a nuestros botones individualmente que sangran 20px desde sus bordes para que podamos verlos como mejor nos parezca.
Nuevamente, puede diseñar los elementos de la página como desee, solo estoy dando un ejemplo de los estilos que decidí usar.
Después de diseñar, nuestro control deslizante debería verse así:
A continuación, vuelva a nuestro archivo js donde describimos cómo funcionan nuestros botones. Bueno, agreguemos otra función, nos mostrará la diapositiva anterior:
Se llama prevSlide, se llamará solo cuando haga clic en prev-btn... Primero, verificamos si estamos en la 1ra diapositiva o no, aquí también verificamos si nuestro slideNow más allá de los límites del rango real de nuestras diapositivas y, si alguna de las condiciones funciona, pasaremos a la última diapositiva cambiando envoltura de diapositivas al valor que necesitamos. Calcularemos este valor por la fórmula: (ancho de una diapositiva) * (número de diapositivas - 1), tomamos todo esto con un signo menos, ya que lo desplazamos hacia la izquierda, resulta que ventana gráfica ahora nos mostrará la última diapositiva. Al final de este bloque, también necesitamos decirle a la variable slideNow que la última diapositiva está ahora en nuestro campo de visión.
Si no estamos en la primera diapositiva, entonces necesitamos mover 1 hacia atrás, para esto volvemos a cambiar la propiedad transformar para envoltura de diapositivas... La fórmula es la siguiente: (ancho de una diapositiva) * (número de la diapositiva actual - 2), nuevamente, tomamos todo esto con un signo menos. Pero, ¿por qué es -2, y no -1, necesitamos mover exactamente 1 diapositiva hacia atrás? El hecho es que si estamos, digamos, en la segunda diapositiva, entonces la variable X propiedades transformar: traducir (x, 0) nuestro envoltura de diapositivas ya es igual al ancho de una diapositiva, si le decimos que necesitamos restar 1 del número de la diapositiva actual, entonces obtendremos nuevamente la unidad por la cual ya está desplazada envoltura de diapositivas, por lo que será necesario cambiar estos mismos anchos en 0 ventana gráfica, lo que significa en slideNow - 2.
Ahora solo necesitamos agregar estas líneas al bloque principal de código:
Aquí solo hacemos un seguimiento de si se hizo un clic en nuestros botones, y en este caso llamamos a las funciones que necesitamos, todo es simple y lógico.
Ahora agreguemos los botones de navegación de diapositivas, de vuelta al marcado:
Como puedes ver, por dentro ventana gráfica apareció una lista anidada, dale un identificador nav-btns, dentro de eso li- nuestros botones de navegación, les asignaremos una clase slide-nav-btn, sin embargo, podemos terminar con el marcado, vayamos a los estilos:
# nav-btns (posición: absoluta; ancho: 100%; parte inferior: 20px; relleno: 0; margen: 0; alineación de texto: centro;) .slide-nav-btn (posición: relativa; pantalla: bloque en línea; estilo de lista: ninguno; ancho: 20px; alto: 20px; color de fondo: #fff; radio del borde: 50%; margen: 3px;) .slide-nav-btn: hover (cursor: pointer;)
Blok nav-btns, en el que se encuentran nuestros botones, le damos la propiedad posición: absoluta, para que no se estire ventana gráfica de altura, porque a envoltura de diapositivas propiedad posición: relativa, establecemos el ancho al 100% para que al usar alineación de texto: centro botones centrales horizontalmente relativos ventana gráfica, luego usando la propiedad fondo le dejamos claro a nuestro bloque que debe estar a una distancia de 20px del borde inferior.
Hacemos lo mismo con los botones que con las diapositivas, pero ahora los configuramos pantalla: bloque en línea ya que a pantalla: en línea ellos no reaccionan a ancho y altura ya que están en un bloque absolutamente posicionado. Haremos su color blanco y con la ayuda de los que ya nos son familiares. radio de borde dales una forma de círculo. Cuando pasas el cursor sobre ellos, cambiaremos la apariencia de nuestro cursor por la pantalla habitual.
Ahora vayamos a jQuery - piezas: Primero, declaremos la variable navBtnId, que almacenará el índice del botón en el que hicimos clic:
Aquí estamos al hacer clic en nuestro slide-nav-btn llamamos a la función que ante todo asigna a la variable navBtnId el índice del botón en el que se hizo clic, es decir, su número ordinal, ya que el conteo comienza desde cero, luego si hacemos clic en el segundo botón, entonces en navBtnId el valor se escribe 1. A continuación, hacemos una verificación, donde agregamos uno al número de serie del botón para obtener un número como si la cuenta regresiva no fuera de 0, sino de 1, comparamos este número con el número de la diapositiva actual, si coinciden, entonces no realizaremos ninguna acción, porque la diapositiva deseada ya está en ventana gráfica.
Si el tobogán que necesitamos está fuera de vista ventana gráfica, luego calculamos la distancia en la que debemos desplazarnos envoltura de diapositivas a la izquierda, luego cambie el valor css transform propiedades en translate(la misma distancia en píxeles, 0). Ya lo hemos hecho más de una vez, por lo que no debería haber preguntas. Al final, volvemos a guardar el valor de la diapositiva actual en una variable. slideNow, este valor se puede calcular agregando uno al índice del botón en el que se hizo clic.
Eso es todo, de hecho, si algo no está claro, entonces dejo un enlace al jsfiddle, donde se proporcionará todo el código escrito en el material.
¡Gracias por la atención!
Etiquetas:
control deslizante jquery
css
animación css3
html
Agregar etiquetas
Este es un control deslizante táctil sensible escrito en jQuery. El motor de este complemento utiliza animaciones CSS3, pero al mismo tiempo, existen alternativas para las versiones anteriores de los navegadores. Glide.js es simple y liviano.
Uso
1. Incluyendo jQuery
La única dependencia del complemento es jQuery, que debemos incluir en primer lugar:
2. Conecta Glide.js
3. Agregar html
Incluyamos los estilos básicos.
Desplieguemos la estructura del control deslizante html.
4. Inicialización
Inicie el control deslizante con la configuración predeterminada ...
... o personalízala tú mismo
Ajustes
Lista de parámetros disponibles:
Parámetro
Valor por defecto
Tipo de
Descripción
auto-reproducción
4000
int / bool
Autodesplazamiento (falso para deshabilitar)
hoverpause
cierto
bool
Pausar el desplazamiento automático al pasar el cursor sobre el control deslizante
animationTime
500
En t
!!! Esta opción funciona si el navegador NO es compatible con css3. ¡Si css3 es compatible con el navegador, entonces este parámetro debe cambiarse en el archivo .css!
flechas
cierto
bool / string
Mostrar / ocultar / adjuntar flechas. Verdadero para mostrar flechas en el contenedor del control deslizante. Falso para esconderse. También puede especificar el nombre de la clase (ejemplo: ".class-name") para adjuntar un código html especial
flechasWrapperClass
flechas deslizantes
cuerda
La clase que se asignará al contenedor con flechas.
arrowMainClass
flecha deslizante
cuerda
La clase principal para todas las flechas.
arrowRightClass
flecha deslizante - derecha
cuerda
Clase de flecha derecha
arrowLeftClass
flecha deslizante - izquierda
cuerda
Clase de flecha izquierda
arrowRightText
Siguiente
cuerda
Texto de flecha derecha
arrowLeftText
anterior
cuerda
Texto de flecha izquierda
nav
cierto
bool / string
Mostrar / ocultar / adjuntar navegación de diapositivas. Fiel a mostrar. Falso para esconderse
navCenter
cierto
bool
Navegación central
navClass
deslizador de navegación
cuerda
Clase para el contenedor de navegación
navItemClass
slider-nav__item
cuerda
Clase para el elemento de navegación
navCurrentItemClass
slider-nav__item - actual
cuerda
Clase para el elemento de navegación actual
teclado
cierto
bool
Desplácese por la diapositiva al presionar los botones izquierda / derecha
touchDistance
60
int / bool
Soporte táctil (toque). False para deshabilitar esta función.
beforeInit
función () ()
función
Devolución de llamada que se ejecutará antes de inicializar el complemento
afterInit
función () ()
función
Devolución de llamada que se ejecutará después de la inicialización del complemento
beforeTransition
función () ()
función
Devolución de llamada que se ejecutará antes de desplazar el control deslizante
afterTransition
función () ()
función
Devolución de llamada que se ejecutará después de desplazar el control deslizante
API
Para usar la API, escriba glide en una variable.
Var glide = $ (". Slider"). Glide (). Data ("api_glide");
Ahora los métodos de la API están disponibles para usted.
Glide.jump (3, console.log ("¡Guau!"));
.current () - Devuelve el número del lado actual
.play (): inicia el desplazamiento automático
.pause (): detener el desplazamiento automático
.next (devolución de llamada): desliza el control deslizante hacia adelante
.prev (devolución de llamada): desplaza el control deslizante hacia atrás
.jump (distancia, devolución de llamada): cambia a una diapositiva específica
.nav (objetivo): adjunta la navegación a un elemento específico (por ejemplo: "cuerpo", ".class", "#id")
.arrows (target): adjunta flechas a un elemento específico (por ejemplo: "body", ".class", "#id")
La descarga comenzará ahora ... No olvides compartir material en las redes sociales con tu colegas
Entrada
