Spanish (Español) translation by Elías Nicolás (you can also view the original English article)
A pesar de la supuesta muerte de "arriba del redil", la necesidad de encontrar el tipo correcto de slider sigue viva y bien.
Y seamos honestos por un minuto: los controles deslizantes son
divertidos. Además, nada hace que un cliente "ooh y ahh" más que ver su
contenido se mueva en la pantalla.
Debido a que los controles deslizantes tienen que ver con el ajuste y la presentación de varios elementos uno detrás del otro, es importante que el código detrás del control deslizante sea lo más ligero posible. Aquí es donde jQuery es una excelente manera de acercarse a los controles deslizantes:
jQuery es una biblioteca de JavaScript rápida, pequeña y rica en funciones.
Eche
un vistazo a estos 20 controles deslizantes jQuery útiles de Envato
Market y verá que hay más en los controles deslizantes que un cuadro que
se desvanece de una imagen a la siguiente.
1. RoyalSlider - Galeria de Imagen habilitada para Touch
Tener un control deslizante táctil y receptivo para su sitio web es más importante ahora que nunca, y RoyalSlider - Galeria de Imagen habilitada para touch es ambos.
Desarrollado con las mejores prácticas de HTML5 y
CSS3, es una opción sólida.



Aquí hay algunas de las otras características realmente geniales:
- SEO optimizado
- altamente
configurable
- más de 10 plantillas de inicio
- incluye fallback para las transiciones de CSS3
- y más
Creo que la mejor característica
es la "arquitectura modular de
scripts" que ofrece a los desarrolladores la opción de excluir lo que no
necesitan del archivo JS principal, manteniendo las cosas lo más
ajustadas posible.
RoyalSlider - Galeria de Imagen habilitada para touch es un
slider de
JavaScript sólido que debería ser una buena adición a cualquier caja de
herramientas de desarrolladores web.
2. Complemento jQuery Slider Revolution Responsive
No es fácil ser "revolucionario" en el espacio deslizante. Solo hay tantas opciones que puede poner a disposición cuando se trata de controles deslizantes, pero el complemento jQuery de Slider Revolution Responsive hace un gran trabajo al intentarlo.
Cuando se trata
de controles deslizantes de jQuery, este ofrece casi todo lo que
desearás.



La lista de funciones para este control deslizante es larga, así que solo alcanzaré los puntos más importantes:
- efectos de
paralaje y animaciones personalizadas
- Optimización SEO y opciones de carga diferida
- agregue capas y diapositivas ilimitadas con opciones
de enlace
- incluye estilos "listos para usar" y altamente personalizables
- y mucho más
La capacidad de incluir una imagen, una
incrustación de reproductor de
video y una fuente de redes sociales hace que el plugin jQuery de
Slider Revolution Responsive sea una de las opciones más flexibles y
personalizables que pueda encontrar.
3. LayerSlider Responsive jQuery Slider Plugin
El nombre del "control deslizante jQuery Responsivo LayerSlider" no hace justicia al control deslizante jQuery.
Las más de
200 transiciones de diapositivas 2D y 3D darán vuelta a algunas
cabezas.



Algunas de las características notables incluyen:
- pieles PSD incluidas
- 13 máscaras y 3 tipos de navegación
- agregar una imagen
fija sobre el control deslizante
- SEO amigable y las imágenes de carga
perezoso
- hardware acelerado transiciones CSS3 con jQuery de respaldo
- y más
Al igual que el control deslizante anterior, puede
incluir
prácticamente cualquier contenido, incluso el contenido multimedia
alojado en HTML5.
El plugin jQuery Slider Responsive de LayerSlider
aporta mucha acción
al espacio del control deslizante y es francamente atractivo.
4. jQuery Banner Rotator / presentación de diapositivas
El control deslizante jQuery Banner Rotator / Slideshow es una solución directa. Es simple sin sacrificar lo esencial.



Incluye:
- información sobre herramientas,
descripciones de texto, etc.
- opciones de visualización de miniaturas y componentes
- temporizador y opciones de retardo de forma global o por
deslizador
- Transiciones múltiples para todas las diapositivas o diferentes para cada una
- Más
Si bien jQuery Banner Rotator / Slideshow
es básico en comparación con
otros controles deslizantes jQuery, no debe pasarse por alto.
5. Todo En Uno Plugin Slider Responsive jQuery Slider
Cada control deslizante sale al mercado con su propia perspectiva única y proporciona una solución para cualquier nicho de "problema del control deslizante".
Pero no este.
El plugin Todo En Uno Slider Responsive jQuery es todo...
en uno.



Creo que la mayoría de desarrolladores web y diseñadores tienen una solución de búsqueda, pero al mismo tiempo, siempre están buscando algo nuevo.
Esto podría ser ese "algo nuevo" ya que incluye:
- rotador de pancarta
- banner de miniaturas
- banner con lista de reproducción
- deslizador de contenido
- carrusel
Y todos estos estilos
de control deslizante incluyen la mayoría, si no
todas, de las características necesarias en un control deslizante de
jQuery.
¿Será el plugin Todo En uno Jquery Slider responsive tu
solución slider todo en uno?
6. UnoSlider - Control deslizante sensible al tacto habilitado
Si su control deslizante no está habilitado para el tacto y responde, no lo está haciendo bien.
El deslizador UnoSlider - Control deslizante sensible al tacto habilitado lo hace bien.
Este control deslizante encuentra su punto ideal entre simple y rico en funciones.
Las características incluyen:
- fácilmente temible
- 12 temas preconstruidos
- 40
transiciones presentes
- Soporte IE6 + (la abuela)
- y más
El
conjunto de características se inclina más hacia el diseño y el
estilo, por lo que el deslizador UnoSlider - Control deslizante sensible
al tacto habilitado es
un deslizador de contenido excelente para el tema.
7. Master Slider - Control deslizante de jQuery Touch Swipe
¿Estás buscando un deslizador jQuery para gobernarlos a todos?
Prueba el control deslizante maestro -
jQuery Touch Swipe Slider para el tamaño...
Cuando se trata de buena apariencia, esta está en el escalón superior:
- precarga inteligente
- más de 25 plantillas
- Transiciones aceleradas por hardware
- admite navegación táctil y gestos de deslizamiento
- y
mucho más
Las transiciones interactivas, las capas animadas y los puntos
de acceso realmente llamarán tu atención.
La colección Master Slider -
jQuery Touch Swipe Slider es una obra maestra.
8. TouchCarousel - jQuery Content Scroller and Slider
El TouchCarousel - jQuery Content Scroller
and Slider promociona
"soporte y actualizaciones gratuitas", pero hay mucho más en este
control deslizante jQuery ligero estilo carrusel.
Con "toque" en el nombre, obviamente es totalmente receptivo y admite navegación táctil.
Otras características incluyen:
- SEO amigable
- reproducción automática inteligente
- hardware acelerado Transiciones CSS3
- interfaz de usuario personalizable con cuatro máscaras de Photoshop
- y más
Sin
embargo, TouchCarousel - jQuery Content Scroller and Slider lleva el
móvil a un nivel completamente nuevo con su exclusivo desplazamiento
basado en la física.
9. Advanced Slider - jQuery XML Slider
Un control deslizante jQuery no es solo para la web. También puede ser útil cuando se integra en las aplicaciones, al igual que con el Control deslizante avanzado: jQuery XML Slider.
Uso del código HTML o XML, este control deslizante avanzado contiene mucho estilo:
- capas animadas y video inteligente
- Más de 100 transiciones y más de 150 opciones personalizables propiedades
- 15 skins de deslizador, 7 skins de barra de desplazamiento y lightbox incorporado,
- soporte de navegación por teclado, soporte de pantalla táctil, y completamente personalizable
- y mucho, mucho más.
Sin embargo, la mejor
característica es el Advanced Slider - jQuery XML Slider API, que lo
hace la solución slider perfecta para su aplicación.
10.jQuery Slider Zoom In / Out Effect Totalmente receptivo
Este es uno de esos controles deslizantes de jQuery que te hace visitar la demostración antes de comenzar a leer sobre las funciones, porque quieres saber qué significa el "efecto de acercamiento / alejamiento".
Piensa: protector de pantalla.
Si bien el efecto es bastante leve, el efecto de zoom en un control deslizante agrega un toque agradable en una red mundial llena de controles deslizantes de imágenes estáticas.
Las características de este slick slider incluyen:
- Transiciones de capa CSS3
- salir de los parámetros de animación para las capas
- opciones fijas, de ancho completo y pantalla completa
- Texto animado con formato CSS y HTML
- y más
Mientras que la mayoría de los controles deslizantes
intentan ofrecer
muchos efectos en un solo paquete, el control deslizante jQuery Slider
Zoom In / Out Effect Fully Responsive ofrece el efecto Ken Burns y lo
entrega bien.
11. jQuery Carousel Evolution
Al igual que con el Control
deslizante avanzado de jQuery XML
mencionado anteriormente, el control deslizante jQuery Carousel
Evolution proporciona una API que se puede utilizar para mejorar su
funcionalidad o incorporar otro proyecto.
Con las imágenes, el marcado de HTML y los videos de YouTube y Vimeo, disfrutará de:
- SEO amigable
- 9 estilos de carrusel
- efectos de sombra y
reflexión
- los tamaños de imagen, frontal y posterior, son configurables
- y más
El jQuery Carousel Evolution es un carrusel simple
que se puede usar de muchas maneras diferentes.
12. Sexy Slider
The Sexy
Slider no es tan sexy como solía ser, pero ha envejecido bien, por lo
que es una solución confiable.
No es muy impresionante a primera vista, pero con un ajuste fino, este control deslizante jQuery flexible se puede configurar para adaptarse perfectamente a su diseño.
Incluye:
- deslizamiento
automático
- subtítulos de imagen
- deslizamiento continuo
- 6 efectos de transición
- y más
Sexy Slider está esperando que desbloquees
su poder y descubras todo su potencial.
13. jQuery Image & Content Scroller w / Lightbox
Con toda esta charla sobre diseño móvil y navegación táctil, es agradable ver un control deslizante jQuery que no se ha olvidado del escritorio.
El jQuery Image & Content Scroller con Lightbox admite la entrada de teclado y la interacción de la rueda del mouse, así como otras cosas interesantes:
- orientación horizontal o vertical
- leyenda de texto dentro o fuera del control deslizante
- establecer el número de diapositivas visibles a la
vez
- incrustar imagen, Flash, iframe, Ajax y contenido en línea
- y más
Tener la caja de luz ya integrada también es muy agradable. Y si lo
desea, el Scroller jQuery Image & Content w / Lightbox se
puede ejecutar con o sin el control deslizante, ejecutando el lightbox
como una aplicación independiente.
14. Translúcido - Responsive Banner Rotator / Slider
La mayoría de los complementos del control deslizante de jQuery incluyen algún tipo de diseño cromado, y aunque puede configurarlo a su gusto, a veces solo desea mantener todo lo contenido en la propia diapositiva.
Ingrese el rotador / control deslizante Translúcido - Responsive Banner.
Hay muchos ajustes preestablecidos, por lo que todo lo que necesitarás hacer es configurarlo y listo.
Las características incluyen:
- 6 variaciones de estilo
- 4 efectos de transición
- 2 transiciones por deslizamiento táctil
- botones y leyendas configurables
- y más
Al igual que otros, es táctil, receptiva y
aprovecha la aceleración de hardware.
Translúcido - Responsive Banner
Rotator / Slider es un diseño
deslizante mínimo que hace un gran trabajo empujando el contenido al
frente.
15. FSS - Complemento de sitio web deslizante de pantalla completa
Entonces, ¿quieres un sitio web deslizante a pantalla completa?
Todo lo que necesita es el FSS - Complemento de sitio web deslizante de pantalla completa.
En serio, sin embargo, la configuración de un sitio web deslizante a pantalla completa es ridículamente fácil con este control deslizante jQuery.
Tiene:
- Soporte AJAX
- soporte de barra de desplazamiento
- soporte de enlace profundo
- 2 efectos de transición diferentes
- y más
Y
si bien la navegación por el teclado y una guía de usuario de 11
páginas son impresionantes, el tamaño de los archivos de 5 kb es el
aspecto más impresionante del FSS: Complemento para el sitio web
deslizante de pantalla completa.
16. Acordeón de Zozo: receptivo y táctil
Aquí hay otro ejemplo de un control deslizante jQuery que se centra en un estilo y lo hace realmente bien.
El acordeón Zozo: receptivo y táctil
es imprescindible para aquellos que buscan un buen control deslizante
estilo acordeón.
Esta belleza animada de CSS3 incluye un conjunto de características robusto:
- acordeón horizontal o vertical
- semántica
HTML5 y SEO amigable
- admite táctil, teclado y WAI-ARIA
- incluye más de 10 máscaras y 6 diseños
- Y mucho más
El control deslizante Zozo
Accordion - Responsive and Touch-Friendly
incluye asistencia y actualizaciones gratuitas, y tiene casi todo lo que
siempre desearías en un deslizador jQuery de acordeón.
17. jQuery Responsive OneByOne Slider Plugin
El complemento jQuery Responsive OneByOne Slider se parece más a la animación que a un control deslizante.
En lugar de mostrar una diapositiva a la vez, esta pequeña
gema
muestra cada elemento en una diapositiva, uno por uno, hasta que toda la
diapositiva haya sido poblada antes de pasar a la siguiente.
La animación CSS3 se ejecuta en Animate.css y es liviana, en capas y completamente lista para la web móvil.
Este pequeño número divertido presenta:
- JavaScript comprimido de 4 kb
- demora automática y pasar el mouse para pausar las opciones
- hardware acelerado transiciones CSS3
- cada diapositiva o elemento puede ser animado de manera diferente
- y más
También hay una opción para arrastrar y soltar navegar
con el mouse, y
el complemento jQuery Responsive OneByOne Slider jives con Twitter
Bootstrap carrusel.
18. Accordionza - jQuery Plugin
Los controles deslizantes de jQuery no son mucho más ligeros que esto.
Utilizando solo
3kb para cargar, el complemento Accordionza - jQuery
es una opción de control deslizante de acordeón súper liviano.



Si no te gustan los tres estilos incluidos, puedes ajustar el HTML y el CSS de este acordeón flexible.
Las características incluyen:
- teclado de navegación
- configurar fácilmente efectos y controles
- mejora progresiva: visible sin JavaScript habilitado
- y más
Tenga en cuenta
que el plugin Accordionza - jQuery puede mostrar
muchos tipos de contenido mixto, lo que lo convierte en una excelente
opción para una opción flexible de control deslizante de acordeón.
19. mightySlider - Control deslizante multipropósito receptivo
El poderoso Slider - Responsive Multiusos Slider es realmente poderoso.
No solo puede
usarlo como un control deslizante de imágenes simple,
sino como un control deslizante unidireccional completo con creación de
navegación basada en elementos para un diseño agradable de una página
web.
Encontrará muchas opciones bajo el capó:
- soporte teclado, mouse y táctil
- aceleracion hardware de transiciones CSS3
- marcado limpio, válido y optimizado para SEO
- diapositivas ilimitadas, subtítulos y efectos de subtítulos
- y mucho más
La API es potente y
amigable para el desarrollador, y se agrega a las muchas formas en que
se puede usar.
Con su código limpio y bien comentado, el poderoso Slider -
Responsive
Multiusos Slider es un excelente control deslizante jQuery con visión
de futuro.
20. Parallax Slider - Plugin de jQuery responsivo
El plugin jQuery de Parallax Slider responde que funciona como el jQuery Responsive OneByOne Slider Plugin, lo que le permite animar cada capa por separado dentro de una diapositiva en particular.
Puede hacer
esto con varias diapositivas o incluso con una sola
diapositiva, agregando una animación de paralaje convincente a su sitio
web.
Esto viene con cuatro tipos diferentes de controles deslizantes, todos ofrecen el mismo efecto animado, de paralaje.
Al igual que con muchos otros controles deslizantes jQuery, también incluye:
- completamente personalizable
- soporte de pantalla táctil
- capas totalmente receptivas e ilimitadas
- autoplay, loop, alto y ancho, y parámetros del temporizador
- y más
Las capas animadas
no están limitadas a texto e imágenes tampoco. También puede incluir
videos de YouTube, Vimeo y HTML5.
El complemento Parallax Slider -
Responsive jQuery es otro excelente
ejemplo de cómo los efectos de tipo Flash se pueden ejecutar mejor que
Flash y ser compatible con todos los dispositivos.
Conclusión
Es interesante ver cómo el control deslizante jQuery ha evolucionado desde algo que acaba de pasar de una imagen a la siguiente, en una amplia gama de herramientas creativas. Vemos controles deslizantes que son 3D, paralaje, página completa, y son totalmente receptivos y se pueden ver en el escritorio o el teléfono inteligente.
Si
no encontró un control deslizante de jQuery que le gustaba en esta
lista, siempre podría tomar un Tutorial de Envato jQuery Code y
desarrollar algo completamente nuevo y único. De lo contrario, explore
los muchos otros grandes controles deslizantes jQuery en Envato Market,
hay mucho para elegir.
¿Cuál es tu slider jQuery favorito y por qué?