Galería de la cartera de Jquery. Una selección de controles deslizantes receptivos

Competentemente compuesto y diseñado visualmente, en nuestro caso, es página separada, es un elemento importante del sitio o blog personal, de cualquier especialista que haya alcanzado un cierto nivel de competencia en sus actividades profesionales.
Una página de portafolio es una especie de informe, o un resumen visual, con la ayuda del cual puede demostrar visualmente a los lectores y visitantes del sitio / blog un conjunto de los trabajos terminados más exitosos, ya sean fotografías, artículos, publicaciones, elementos de diseño, etc.
No tengo una página de este tipo y, por mi parte, esta es una omisión molesta que debe corregirse lo antes posible. este momento y yo trabajo.
En extensiones infinitas red global, puedes encontrar una gran cantidad de plantillas listas para usar páginas para organizar su portafolio, y la variedad de tales páginas es realmente impresionante. Por lo tanto, aquellos que están en apuros para profundizar en todas las complejidades del diseño y desarrollo web siempre podrán encontrar una opción adecuada para ellos. Bueno, para aquellos que están sufriendo conocimientos en la construcción de sitios, les propongo analizar un ejemplo diseño adaptable, una página de portafolio simple, con filtrado de obra terminada por categoría, terminada, diluida con un atractivo efecto de transición, con elementos de animación.

El diseño de la página, javascript ejecutable y algunos elementos de diseño, fueron dados por el maravilloso diseñador y desarrollador web Kevin Liew (queness.com). Al elegir la solución óptima, fue importante para mí que la simplicidad de ejecución, la funcionalidad del complemento jQuery, el funcionamiento correcto en todos los navegadores modernos y, dada la creciente popularidad del uso de varios dispositivos móviles para navegar por Internet, la adaptabilidad del diseño de la página futura. Sin lujos, campanas y silbidos de diseñador o complementos pesados.

El diseño básico consta de dos elementos principales de la interfaz de usuario que tenemos que construir, estos son la navegación por pestañas para filtrar las categorías de trabajos enviados, y la propia cuadrícula de miniaturas con un efecto de leyenda emergente al pasar el mouse.
Para empezar, para que todo funcione al final, necesitará jQuery al menos la versión 1.7.0. Si aún no lo ha conectado, agregue línea siguiente antes de la etiqueta :

Ejecute el complemento MixItUp, pegue este código después de los archivos anteriores:

< script type= "text/javascript" >$ (function () (var filterList = (init: function () ($ ("# portfoliolist"). mixitup ((targetSelector: ".portfolio", filterSelector: ".filter", efectos: ["fade"], suavizado : "snap", // llama al efecto de desplazamiento enMixEnd: filterList. hoverEffect ()));), hoverEffect: function () ($ ("# portfoliolist .portfolio"). hover (function () ($ (this). find (". label"). stop (). animate ((bottom: 0), 200, "easyOutQuad"); $ (this). find ("img"). stop (). animate ((top: - 30 ), 500, "easyOutQuad");), function () ($ (this). Find (". Label"). Stop (). Animate ((abajo: - 40), 200, "easyInQuad"); $ ( this). find ("img"). stop (). animate ((arriba: 0), 300, "easyOutQuad");));)); filterList. init ();));

Considere por separado todas las opciones de complementos, no tiene sentido, el valor predeterminado es bonito la mejor opción... Bueno, si realmente inserta a alguien para que experimente con los parámetros, por favor, todo está en su poder.

Para formar el diseño de la página y la apariencia de los elementos, conecte un par de archivos al documento . , uno para los estilos base, llamémoslo layout.css y otro pequeño archivo CSS normalize.css para garantizar una mejor coherencia entre los navegadores en el estilo estándar de los elementos:

< link rel= "stylesheet" href= "css/normalize.css" > < link rel= "stylesheet" href= "css/layout.css" >

Ahora solucionemos todo en orden, si es posible sin agua innecesaria, de una manera accesible y comprensible, en nuestro idioma nativo y sufrido.

< ul id= "filters" class = "clearfix" > < li>< span class = "filter active" data- filter= "app card icon logo web" >Todo < li>< span class = "filter" data- filter= "app" >Aplicaciones < li>< span class = "filter" data- filter= "card" >Cartas de negocios < li>< span class = "filter" data- filter= "icon" >Iconos < li>< span class = "filter" data- filter= "logo" >Logo < li>< span class = "filter" data- filter= "web" >diseño web

• Todo
• Aplicaciones
• Cartas de negocios
• Iconos
• Logo
• diseño web

En la barra de navegación, coloque la lista completa de obras, dividida en categorías. Necesitamos asociar cada categoría de cartera a través del atributo data-cat con uno u otro elemento en la barra de navegación de acuerdo con el valor en el atributo data-filter. Al hacer coincidir los valores de data-filter con data-cat, los elementos de la cartera se filtrarán por categoría.
Además, agregaremos a la miniatura, oculta por el momento, un pequeño panel con el nombre de la obra y el título de la categoría, que aparece solo cuando pasas el cursor sobre la imagen. Y para que sea más fácil de formar apariencia Toda esta construcción en CSS, escribiremos las clases correspondientes a los elementos:

< div id= "portfoliolist" > < div class = "portfolio logo" data- cat= "logo" > < div class = "portfolio-wrapper" > < img src= "img/portfolios/logo/5.jpg" alt= "" /> < div class = "label" > < div class = "label-text" > < a class = "text-title" >Hospedaje por Beget. Ru < span class = "text-category" >Logo < div class = "label-bg" > .........

Tenga en cuenta que puede agregar enlaces a la imagen o directamente a la firma para que el usuario pueda contemplar en su totalidad todas sus obras.

CSS

Ahora, en silencio, pasemos a lo más interesante, a la formación en CSS de los estilos generales de la interfaz de usuario de nuestra página de portafolio y su versión receptiva. En el artículo indicaré solo los valores básicos (predeterminados), es decir, sin imágenes de fondo y fuentes conectadas, todo esto, quién lo necesita, se puede ver en la demostración o encontrar en el archivo con las fuentes.

.contenedor (posición: relativa; ancho: 960px; margen: 0 automático; / * Podrá ver la cadena de transiciones cuando se cambie el tamaño de la ventana del navegador * /-webkit-transición: facilidad de todos los 1; -moz-transición: todos los 1 se facilitan; -o-transición: facilidad de todos los 1; transición: todos los unos se facilitan; ) #filtros (margin: 1%; padding: 0; list-style: none;) #filters li (float: left;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color : # 666; / * agrega algo de sombra para el texto * / sombra de texto: 1px 1px #FFFFFF; cursor: puntero; ) / * cambiar el fondo de la categoría al pasar el mouse * /#filtros li span: hover (fondo: # 34B7CD; texto-sombra: 0 0 2px # 004B7D; color: #fff;) / * fondo del elemento de categoría activo * /#filtros li span.active (fondo: rgb (62, 151, 221); texto-sombra: 0 0 2px # 004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; ancho: 23%; margen: 1%; display: none; float: left; overflow: hidden;) .portfolio-wrapper ( desbordamiento: oculto; posición: relativo! importante; fondo: # 666; cursor: puntero;) .portfolio img (ancho máximo: 100%; posición: relativo;) / * las firmas están ocultas por defecto * /.portfolio .label (posición: absoluta; ancho: 100%; alto: 40px; parte inferior: -40px;) .portfolio .label-bg (fondo: rgb (62, 151, 221); ancho: 100%; alto: 100 %; posición: absoluta; arriba: 0; izquierda: 0;) .portfolio .label-text (color: #fff; posición: relativa; z-index: 500; padding: 5px 8px;) .portfolio .text-category ( pantalla: bloque; tamaño de fuente: 9px;)

Contenedor (posición: relativa; ancho: 960px; margen: 0 automático; / * Podrá ver la cadena de transiciones cuando se cambie el tamaño de la ventana del navegador * / -webkit-transición: todos los 1s facilidad; -moz-transición: todos 1s facilidad; -o- transición: todos 1s facilidad; transición: todos 1s facilidad;) #filters (margin: 1%; padding: 0; list-style: none;) #filters li (float: left;) #filters li span (display: block; padding: 5px 20px; text-decoration: none; color: # 666; / * agregar algo de sombra para el texto * / text-shadow: 1px 1px #FFFFFF; cursor: puntero;) / * cambiar el fondo de la categoría al pasar el mouse * / #filtros li span: hover (background: # 34B7CD; text-shadow: 0 0 2px # 004B7D; color: #fff;) / * fondo del elemento de categoría activo * / #filters li span .active (background: rgb (62, 151, 221); text-shadow: 0 0 2px # 004B7D; color: #fff;) #portfoliolist .portfolio (-webkit-box-sizing: border-box; -moz-box -sizing: border-box; -o-box- tamaño: border-box; ancho: 23%; margen: 1%; display: none; float: left; overflow: hidden;) .po rtfolio-wrapper (desbordamiento: oculto; posición: relativa! importante; fondo: # 666; cursor: puntero; ) .portfolio img (ancho máximo: 100%; posición: relativa;) / * los subtítulos están ocultos por defecto * / .portfolio .label (posición: absoluta; ancho: 100%; alto: 40px; inferior: -40px;) .portfolio .label-bg (fondo: rgb (62, 151, 221); ancho: 100%; alto: 100%; posición: absoluta; arriba: 0; izquierda: 0;) .portfolio .label-text (color: # fff; posición: relativa; índice z: 500; relleno: 5px 8px;) .portfolio .text-category (display: block; font-size: 9px;)

En la segunda parte, justo en la misma hoja de estilo, utilizando algunas consultas de medios, crearemos las secciones CSS alternativas. Para que el diseño de nuestra página aparezca correctamente en las pantallas de varios dispositivos móviles, agreguemos reglas CSS alternativas para diferentes pantallas en estas secciones. Por lo tanto, podemos anular fácilmente cualquier regla establecida anteriormente en nuestra tabla CSS para navegadores comunes y lograr la adaptabilidad deseada.

/ * Tableta * / @media solo pantalla y (ancho mínimo: 768px) y (ancho máximo: 959px) (.container (ancho: 768px;)) / * Móvil - Nota: Diseño para 320px de ancho * /@media solo pantalla y (max-width: 767px) (.container (width: 95%;) #portfoliolist .portfolio (width: 48%; margin: 1%;)) / * Móvil - Nota: Diseño para 480px de ancho * /@media solo pantalla y (min-width: 480px) y (max-width: 767px) (.container (width: 70%;))

/ * Tablet * / @media solo pantalla y (min-width: 768px) y (max-width: 959px) (.container (width: 768px;)) / * Mobile - Nota: Diseño para 320px de ancho * / @media only screen and (max-width: 767px) (.container (width: 95%;) #portfoliolist .portfolio (width: 48%; margin: 1%;)) / * Mobile - Note: Design for 480px width * / @media solo pantalla y (ancho mínimo: 480px) y (ancho máximo: 767px) (.container (ancho: 70%;))

Eso es todo. Nuestra maravillosa página bajo el amplio título "Portafolio" está lista, solo queda llenarla con nuestras obras no menos maravillosas y sobresalientes, y mostrarla al mundo entero. Aún puedes estar orgulloso de ti mismo de una manera tranquila y modesta. Lo principal es no exagerar en este asunto.
Mire nuevamente el ejemplo y, si es necesario, tome el código fuente, a su gusto, en un ambiente hogareño tranquilo, podrá perfeccionar este trabajo.

Al crear la lección, se utilizó el siguiente material :. El original, impecablemente limpio, recién sacado de la pluma del autor, la página del portafolio, está en el mismo lugar.

¡Mucha suerte a todos y con beneficios para el cuerpo, para pasar el resto del corto verano!

Actualmente, un control deslizante, un carrusel, funcionalidad que solo necesita tener en un sitio web para una empresa, un sitio web, una cartera o cualquier otro recurso. Junto con los controles deslizantes de imagen de pantalla completa, los controles deslizantes de carrusel horizontales se adaptan bien a cualquier diseño web.

A veces, el control deslizante debería ocupar un tercio de la página del sitio. Aquí, el control deslizante del carrusel se usa con efectos de transición y diseños receptivos. Sitios web comercio electronico use un control deslizante de carrusel para mostrar varias fotos en publicaciones o páginas separadas. El código deslizante se puede utilizar y cambiar libremente según sus necesidades.

Al usar jQuery junto con HTML5 y CSS3, puede hacer que sus páginas sean más interesantes al proporcionarles efectos únicos y llamar la atención de los visitantes a un área específica del sitio.

Slick - complemento de control deslizante moderno - carrusel

Slick es un complemento jquery gratuito cuyos desarrolladores afirman que su solución satisfará todos sus requisitos de control deslizante. El control deslizante de carrusel sensible puede funcionar en modo mosaico para dispositivos móviles y en modo de arrastrar y soltar para la versión de escritorio.

Contiene un efecto de transición "fade", una característica interesante "modo en el centro", carga diferida de imágenes con desplazamiento automático. La funcionalidad actualizada incluye agregar diapositivas y un filtro de diapositivas. Todo para que puedas personalizar el plugin según tus necesidades.

Modo de demostración | Descargar

Owl Carousel 2.0 - jQuery - complemento táctil

En el arsenal de este complemento: conjunto grande características adecuadas para desarrolladores novatos y experimentados. Esta es una versión actualizada del control deslizante de carrusel. Su predecesor fue nombrado exactamente igual.

El control deslizante contiene algunos complementos integrados para mejorar la funcionalidad general. Animación, reproducción de video, reproducción automática del control deslizante, carga diferida, ajuste automático de altura son las características principales de Owl Carousel 2.0.

Capacidades de soporte arrastrar y Se incluye drop para un uso más fácil del complemento en dispositivos móviles.
El complemento es perfecto para mostrar imágenes grandes incluso en pantallas pequeñas de dispositivos móviles.

Ejemplos | Descargar

Complemento jQuery Silver Track

Complemento jquery bastante pequeño, pero rico en funcionalidades que le permite colocar un control deslizante en la página, un carrusel que tiene un núcleo pequeño y no consume muchos recursos del sitio. El complemento se puede utilizar para mostrar controles deslizantes verticales y horizontales, animaciones y crear conjuntos de imágenes de la galería.

Ejemplos | Descargar

AnoSlide: control deslizante jQuery ultracompacto y sensible

Ultra compacto control deslizante de jQuery- carrusel, cuya funcionalidad es mucho más que la de un control deslizante normal. Incluye vista previa de una sola imagen, visualización de carrusel de múltiples imágenes y control deslizante basado en títulos.

Ejemplos | Descargar

Carrusel de búhos - Control deslizante de Jquery - Carrusel

Carrusel de búhos - control deslizante con soporte pantallas táctiles y tecnologías de arrastrar y soltar, fácilmente integrables en código HTML. El complemento es uno de los mejores controles deslizantes que le permite crear hermosos carruseles sin ningún marcado especialmente preparado.

Ejemplos | Descargar

Galería 3D - carrusel

Utiliza transiciones 3D basadas en estilos CSS y algo de código Javascript.

Ejemplos | Descargar

Carrusel 3D con TweenMax.js y jQuery

Gran carrusel 3D. Parece que esta sigue siendo una versión beta, porque descubrí un par de problemas con ella en este momento. Si está interesado en probar y crear sus propios controles deslizantes, este carrusel será de gran ayuda.

Ejemplos | Descargar

Carrusel usando bootstrap

Control deslizante de carrusel receptivo que utiliza la tecnología bootstrap adecuada para su nuevo sitio web.

Ejemplos | Descargar

Basado en Bootstrap - Marco deslizante de carrusel Moving Box

Más solicitado en portafolios y sitios comerciales. Este tipo de control deslizante de carrusel se encuentra a menudo en cualquier tipo de sitio.

Ejemplos | Descargar

Pequeño Circleslider

Este pequeño control deslizante está listo para funcionar en dispositivos con cualquier resolución de pantalla. El control deslizante puede funcionar tanto en modo circular como en carrusel. Tiny circle se presenta como una alternativa a otro tipo similar de deslizadores. Hay soporte incorporado sistemas operativos IOS y Android.

El control deslizante se ve bastante interesante en modo circular. El soporte de arrastrar y soltar y el sistema de desplazamiento automático de diapositivas están excelentemente implementados.

Ejemplos | Descargar

Control deslizante de contenido de Thumbelina

El control deslizante de carrusel potente y receptivo es perfecto para un sitio web moderno. Funciona correctamente en cualquier dispositivo. Tiene modos horizontal y vertical. Su tamaño se minimiza a solo 1 KB. El complemento ultracompacto también tiene excelentes transiciones suaves.

Ejemplos | Descargar

Wow - control deslizante - carrusel

Contiene más de 50 efectos que pueden ayudarlo a crear un control deslizante original para su sitio web.

Ejemplos | Descargar

Control deslizante de contenido de jQuery receptivo bxSlider

Cambie el tamaño de la ventana de su navegador para ver cómo se adapta el control deslizante. Bxslider viene con más de 50 opciones de personalización y muestra sus características con varios efectos de transición.

Ejemplos | Descargar

jCarrusel

jCarousel es un complemento de jQuery que te ayudará a organizar la vista previa de tu imagen. Puede crear fácilmente imágenes de carrusel personalizadas desde el marco que se muestra en el ejemplo. El control deslizante responde y está optimizado para funcionar en plataformas móviles.

Ejemplos | Descargar

Scrollbox - complemento de jQuery

Scrollbox es un complemento compacto para crear un control deslizante: carrusel o línea de desplazamiento de texto. Las características clave incluyen desplazamiento vertical y horizontal con pausa al pasar el mouse.

Ejemplos | Descargar

dbpasCarrusel

Control deslizante simple - carrusel. Si necesita un complemento rápido, este funcionará al 100%. Viene solo con las funciones básicas requeridas para que funcione el control deslizante.

Ejemplos | Descargar

Flexisel: Complemento Responsive JQuery Slider - Carrusel

Los creadores de Flexisel se inspiraron en el plugin jCarousel de la vieja escuela y realizaron una copia del mismo centrada en el correcto funcionamiento del control deslizante en dispositivos móviles y tabletas.

El diseño receptivo de Flexisel, cuando se trabaja en dispositivos móviles, difiere del diseño orientado al tamaño de la ventana del navegador. Flexisel está perfectamente adaptado para trabajar en pantallas, tanto de baja como de alta resolución.

Ejemplos | Descargar

Elastislide - deslizador sensible - carrusel

Elastislide se adapta perfectamente al tamaño de la pantalla del dispositivo. Puede establecer el número mínimo de imágenes para mostrar con una resolución específica. Funciona bien como un deslizador de carrusel de galería de imágenes, utilizando un contenedor fijo junto con un efecto de desplazamiento vertical.

Ejemplo | Descargar

FlexSlider 2

Control deslizante libremente redistribuible de Woothemes. Es considerado uno de los mejores controles deslizantes sensibles... El complemento contiene varias plantillas y será útil tanto para usuarios novatos como para expertos.

Ejemplo | Descargar

Carrusel increíble

Amazing Carousel es un control deslizante de imágenes jQuery sensible. Admite muchos sistemas de gestión de sitios como WordPress, Drupal y Joomla. También es compatible con Android e IOS y las versiones de escritorio de los sistemas operativos sin ningún problema de compatibilidad. Las increíbles plantillas de carrusel incorporadas le permiten usar el control deslizante en los modos vertical, horizontal y circular.

Ejemplos | Descargar

Durante mucho tiempo elegí un tema para el tema de hoy. Como resultado, noté que aún no hemos hecho selecciones con galerías de imágenes... En mi opinión gran tema, porque galerías están presentes en muchos sitios. Para ser honesto, no todos son muy atractivos. Considerando las tendencias de desarrollo actuales jquery, html5 y así sucesivamente, pensé que las soluciones ya deberían ser mucho más atractivas que las que he encontrado antes. Entonces. Después de pasar un día, logré encontrar numero enorme guiones. De toda esta montaña, decidí seleccionar solo, porque me encanta, como ya habrás notado en publicaciones anteriores.
Galería de imágenes aplicable no solo en el caso con álbumes de fotos... El script se puede usar, creo que será incluso más correcto, ya que portafolio para fotógrafos, diseñadores etc. Efectos de jquery ayudará a captar la atención de los visitantes y simplemente agregará elegancia a su sitio web.
Entonces. Para tu colección de atención Complementos de galería de imágenes jquery para sitios web.
No olvides comentar y recordar, para no perder esta colección, puedes agregarla a tus favoritos haciendo clic en la estrella al pie del artículo.

FOTOBOX

Galería de imágenes gratuita, liviana y receptiva, en el que todos los efectos, las transiciones se realizan utilizando css3. Ideal para crear un sitio web de fotografía.

Galería S

Atractivo Complemento de galería de imágenes de jquery... La animación funciona con css3.

DIAMONDS.JS

Original complemento para crear una galería de imágenes... Las miniaturas tienen la forma de diamante, que es muy popular en este momento. Este formulario se realiza utilizando css3. El único inconveniente de esta galería es la ausencia de una caja de luz, que abriría una foto en tamaño completo. Es decir, debes atornillar el complemento de caja de luz con cangrejos. Este script genera una cuadrícula de imágenes receptiva en forma de diamante.

Superbox

Galería de imágenes moderna usando Jquery, css3 y html5... Todos estamos acostumbrados al hecho de que cuando hace clic en la vista previa, la imagen completa se abre en una caja de luz (ventana emergente). Los desarrolladores de este complemento decidieron que la caja de luz ya ha dejado de ser útil. Las imágenes de esta galería se abren debajo de la vista previa. Vea la demostración y compruebe que esta solución parece mucho más moderna.
|

Galería de atenuación diagonal suave

Una moderna galería de imágenes en la que las vistas previas se distribuyen en todo el espacio de la pantalla... El script puede escanear una carpeta con una foto en el servidor, es decir, no es necesario que inserte cada imagen por separado. Basta con cargar imágenes en una carpeta del servidor y especificar la ruta al directorio en la configuración. Entonces el guión hará todo por sí mismo.

Galería Gamma

Una galería de imágenes elegante, liviana y receptiva con una cuadrícula al estilo de Pinterest que se ha vuelto muy popular en estos días. El script funciona bien para ambos computadoras estacionarias y en dispositivos móviles con cualquier resolución de pantalla. Una gran solución para crear una cartera de diseñadores web.

CUADRÍCULA EN MINIATURA CON VISTA PREVIA EXPANDIBLE

El complemento es cuadrícula de imagen sensible... Al hacer clic a continuación, se muestra una foto más grande y una descripción. Bueno para crear un portafolio.

jGallery

jGallery es pantalla completa, galería de imágenes receptiva... Los efectos, las transiciones e incluso el estilo se pueden personalizar fácilmente.

Glisse.js

Complemento de galería de imágenes simple pero muy efectivo. Esta es exactamente la solución cuando necesita crear un álbum de fotos. El complemento admite álbumes y tiene un efecto de volteo muy bueno.

Flujo de mosaico

Simple, receptivo galería de imágenes con una cuadrícula al estilo de Pinterest.

Galereya

Otra galería elegante con una cuadrícula estilo Pinterest filtrada por categoría. Funciona en navegadores: Chrome, Safari, Firefox, Opera, IE7 +, navegador Android, móvil Chrome, móvil Firefox.

menos.js

Excelente galería de imágenes gratis con usando JQUERY, 5 y CSS3. Tiene una apariencia muy atractiva y seguramente llamará la atención de sus visitantes.

flipLightBox

Una sencilla galería de imágenes. Al hacer clic en la vista previa, la imagen completa se abre en la caja de luz.

galería blueimp

Galería flexible. Capaz de mostrar en una ventana modal no solo imágenes, sino también video... Funciona muy bien en dispositivos táctiles. Es fácil de personalizar y es posible ampliar la funcionalidad con complementos adicionales (consulte el siguiente complemento).

Las galerías de imágenes y los controles deslizantes son algunos de los formatos de jQuery más populares. Gracias a ellos, puede agregar la cantidad necesaria de contenido visual al sitio, mientras ahorra un valioso espacio.

Las galerías y los controles deslizantes hacen que la página esté menos ocupada, pero aún le permiten agregar todas las imágenes necesarias para transmitir el mensaje. Serán especialmente útiles para las tiendas online.

En el artículo de hoy, hemos recopilado para ti mejores galerías imágenes y controles deslizantes de jQuery.

Para instalarlos, simplemente agregue los complementos seleccionados a la sección principal Páginas HTML junto con la biblioteca jQuery y configúrelos de acuerdo con la documentación (solo un par de líneas de código).

Elija cuál de estos elementos encajará perfectamente en su proyecto.

1. Control deslizante Bootstrap

Bootstrap Slider es un control deslizante de imagen gratuito optimizado para dispositivos móviles con desplazamiento táctil y deslizante. Se verá increíble en cualquier pantalla y en cualquier navegador. Puede cargar imágenes, videos, texto, miniaturas y botones en controles deslizantes.

2. Control deslizante de vista previa del producto

El control deslizante de vista previa del producto encarna todo el potencial de jQuery y se integra perfectamente en cualquier interfaz. También estará satisfecho con la calidad y limpieza del código de este complemento.

3. Galería de imágenes expandible

La Galería de imágenes expandible es un complemento increíble que se convierte en una galería de pantalla completa con solo un clic. Se puede utilizar para la sección Acerca de nosotros o para ver información del producto.

4. Fotorama

Fotorama es un complemento de galería sensible a jQuery que funciona tanto para escritorio como para navegadores móviles... Ofrece muchas opciones de navegación: miniaturas, desplazamiento, botones de avance y retroceso, presentaciones de diapositivas automáticas y marcadores.

5. Control deslizante inmersivo

Immersive Slider te permite crear una experiencia de presentación de diapositivas única similar al control deslizante de Google TV. Puede cambiar la imagen de fondo para que se vea borrosa para mantener el enfoque en la foto principal.

6. Leastjs

Leastjs es un complemento de jQuery receptivo para ayudarlo a crear una galería increíble. Cuando pasa el cursor sobre la imagen, aparece texto; cuando se presiona, la ventana se expande a pantalla completa.

7. Plantilla de paneles deslizantes

Este complemento es perfecto para una cartera. Creará bloques de imágenes, dispuestas horizontalmente (verticalmente en pantallas pequeñas), a las que se anclará el contenido seleccionado.

8. Plantilla de portafolio de Squeezebox

Squeezebox Portfolio Template ofrece efectos de movimiento para portafolios. Cuando pasa el cursor sobre la imagen principal (o bloque), aparecen elementos anclados.

9. Mezclar imágenes

Shuffle Images es un increíble complemento receptivo que te permite crear una galería con imágenes que cambian al pasar el mouse.

10. Complemento gratuito de jQuery Lightbox

Gratis jQuery Lightbox El complemento le ayuda a mostrar una o más imágenes en una página. También se pueden ampliar y devolver a su tamaño original.

11. PgwSlider: control deslizante sensible para jQuery

PgwSlider es un control deslizante de imágenes minimalista. El código jQuery es liviano, por lo que la velocidad de carga de este complemento te sorprenderá gratamente.

12. Galería de Polaroids Dispersas

La galería de Polaroids dispersas es un control deslizante de diseño plano impresionante. Sus elementos se mueven de forma errática al cambiar de imagen, lo que se ve increíble.

13. Filtro de contenido hinchable

Bouncy Content Filter es la solución perfecta para una cartera. Este complemento permite a los usuarios pasar rápidamente de una categoría a otra.

14. Control deslizante simple de jQuery

Simple jQuery Slider hace honor a su nombre. Este complemento combina elementos JavaScript, HTML5 y CSS3. En la demostración, de forma predeterminada, solo está disponible la carga de texto, pero si realiza algunos cambios, también puede agregar contenido visual.

15. Glide JS

Glide JS es un control deslizante de jQuery simple, rápido y receptivo. Es fácil de configurar y no ocupa mucho espacio.

16. Deslizador de arrastre de pantalla completa con paralaje

Este increíble control deslizante de jQuery con la capacidad de cargar imágenes y texto funcionará para cualquier sitio web. Hará las delicias de los usuarios con un ligero efecto de paralaje y una apariencia de texto lenta.

por Digital Telepathy
Un control deslizante de contenido asombroso: SlideDeck: una mejor manera de proporcionar contenido en la web con el objetivo de facilitar a los usuarios la digestión y la comprensión del contenido de un sitio web.

slideViewer (un control deslizante de imagen jQuery construido en una sola lista desordenada) 1.2

por Gian Carlo Mingati
SlideViewer es un complemento jQuery liviano (3.5Kb) que permite crear instantáneamente una galería de imágenes escribiendo solo unas pocas líneas de HTML, como una lista desordenada de imágenes

jqFancyTransitions - presentación de diapositivas con efectos de tira

por Ivan Lazarevic
jqFancyTransitions es un complemento jQuery fácil de usar para mostrar sus fotos como presentación de diapositivas con elegantes efectos de transición.

AviaSlider - Presentación de diapositivas de jQuery

por Gaya
Presentation Cycle es una variación de la funcionalidad del script jQuery Cycle. En lugar de generar una lista de números en los que se puede hacer clic, Presentation Cycle genera una barra de progreso que muestra cuándo aparecerá la nueva diapositiva.

por Dev7studios
El control deslizante de imágenes de WordPress y jQuery más impresionante del mundo, con características:

• 16 efectos de transición únicos
• Marcado simple, limpio y válido
• Un montón de configuraciones para modificar
• Navegación de control y direccional integrada
• La versión empaquetada solo pesa 12 kb
• Admite la vinculación de imágenes
• Navegación por teclado
• Subtítulos HTML
• 3 temas elegantes
• Libre de usar y abusar bajo la licencia MIT

por DaleDavies
¡Posiblemente el complemento jQuery más fácil de usar para hacer presentaciones de diapositivas! jQuery Easy Slides también tiene la ventaja de ser bastante liviano, con Javascript y CSS que pesan poco menos de 2.1kb.

Control deslizante avanzado: control deslizante XML de jQuery

por D.Massiani
Horinaja es una implementación de presentación de diapositivas lista para usar, que utiliza scriptaculous / prototype o jQuery. Horinaja es innovador porque le permite usar una rueda del mouse para navegar.

por OVIDIU CHERECHEȘ
Dragdealer es un componente de JavaScript basado en arrastre que abarca infinitas soluciones de front-end. Diseñado con elegancia para programadores con reconocimiento de JavaScript.

por Thomas Kahn
Smooth Div Scroll es un complemento de jQuery que desplaza el contenido horizontalmente hacia la izquierda o hacia la derecha. Aparte de muchos de los otros complementos de desplazamiento que se han escrito para jQuery, Smooth Div Scroll no limita el desplazamiento a distintos pasos. Como sugiere el nombre del complemento, el desplazamiento es fluido. No hay botones o enlaces visibles, ya que el desplazamiento se realiza mediante puntos de acceso dentro del área de desplazamiento o mediante el desplazamiento automático. Discreto y suave es la clave aquí.

por Sam Dunn
Supersized es una presentación de diapositivas de fondo en pantalla completa creada con la biblioteca jQuery.

por Jeremy Fry
Un simple complemento de jquery para hacer una presentación de diapositivas en su galería de imágenes.

UnoSlider - Control deslizante sensible al tacto habilitado

por bxCreative
bxSlider es un control deslizante de contenido jQuery con características:

• Transiciones horizontales, verticales y de fundido
• Mostrar y mover varias diapositivas a la vez (carrusel)
• Anterior / siguiente, buscapersonas, controles automáticos
• Facilitar las transiciones
• Inicio aleatorio
• Modo de teletipo
• Antes, después, primero, último, siguiente, funciones de devolución de llamada anterior
• Estilo opcional incluido
• Toneladas de opciones

por Gian Carlo Mingati
slideViewerPro es un motor de galería de imágenes jQuery totalmente personalizable que permite crear galerías de imágenes deslizantes excepcionales para sus proyectos y / o galerías interactivas dentro de las publicaciones de blog.

por Nathan Searles
Slides es un complemento de presentación de diapositivas para jQuery que se creó teniendo en cuenta la simplicidad. Repleto de un conjunto útil de funciones para ayudar a los principiantes y avanzado los desarrolladores crean presentaciones de diapositivas elegantes y fáciles de usar.

por Dynamic Drive
¿Desea mostrar imágenes como una presentación de diapositivas automática que el usuario también pueda reproducir o pausar explícitamente? La Galería de controles simples gira y muestra una imagen difuminando su vista sobre la anterior, con controles de navegación que aparecen cuando el mouse pasa sobre la Galería.

por Boban Karišik
El complemento s3Slider jQuery se crea mediante un ejemplo del script de presentación de diapositivas suave de jd.

por New Signature
jCoverflip se ha desarrollado para permitir una personalización rápida y granular de la apariencia y el conjunto de funciones.

por Mary Lou
Elastislide es un carrusel de jQuery sensible que adaptará su tamaño y su comportamiento para trabajar en cualquier tamaño de pantalla. Insertar la estructura de carruseles en un recipiente con un ancho fluido también hará que el carrusel sea fluido.

por ZURB
¿Harto de los controles deslizantes de imágenes confusos e hinchados que nunca funcionan? Orbit de Rock ZURB por solo 4 KB.

LayerSlider - El control deslizante del efecto Parallax

por Scott
Un increíble jQuery UI Slider, este complemento utiliza una mejora progresiva para reemplazar un elemento de selección HTML ya funcional con un control deslizante de jQuery UI, y agrega una serie de características tanto para usuarios visuales como para aquellos en tecnologías de asistencia.

por Tyler Smith
Un complemento de control deslizante de jQuery increíble y totalmente receptivo. Con características:

• Marcado semántico simple
• Compatible con todos los principales navegadores
• Animaciones de deslizamiento y desvanecimiento horizontal / vertical
• Compatibilidad con varios controles deslizantes, API de devolución de llamada y más
• Soporte de deslizamiento táctil acelerado por hardware
• Opciones de navegación personalizadas
• Use cualquier elemento html en las diapositivas
• Diseñado tanto para principiantes como para profesionales
• De uso gratuito bajo la licencia MIT

por d. Dibujó diseño
Un complemento de presentación de diapositivas de jQuery súper simple, con características - FÁCIL - PEQUEÑO - FLEXIBLE - ORDENADO

Complemento jQuery de galería de imágenes deslizante

por Justin Mead
La idea detrás de este complemento es mostrar un número variable de imágenes de una manera atractiva y fácil de usar.

Translúcido - jQuery Banner Rotator / Slideshow

por Mark Tyrrell
Un complemento de control deslizante de imágenes de jQuery que se ha escrito específicamente para trabajar con diseños web fluidos / receptivos.

Control deslizante de monedas

por Ivan Lazarevic
Un control deslizante de imágenes de jQuery con efectos únicos y las otras características:

• De uso gratuito bajo licencia MIT
• Compatible con Android y iPhone
• Efectos de transición únicos
• Marcado válido
• Configuración flexible
• Deslizamiento automático
• Caja de navegación
• Ligero (solo 8 kb)
• Vinculación de imágenes
• Totalmente personalizable mediante CSS

por Christoph Schüßler
jQuery.popeye es un script de galería de imágenes avanzado construido sobre la biblioteca de JavaScript jQuery. Úselo para ahorrar espacio al mostrar una colección de imágenes y ofrecer a sus usuarios una forma agradable y elegante de mostrar una versión grande de sus imágenes sin salir del flujo de la página.

por Jack Moore
Un complemento ligero de caja de luz personalizable para jQuery 1.3+

por aeroalquimia
Slider Evolution es un complemento de JQuery que le permite crear fácilmente controles deslizantes de JavaScript potentes con efectos de transición muy agradables. ¡Mejore su sitio web agregando un control deslizante único y atractivo!