Hogar › Ajustes › Control deslizante de ancho de página completo. Control deslizante con enlace de música. Nivo Slider – complemento jQuery gratuito

Control deslizante de ancho de página completo. Control deslizante con enlace de música. Nivo Slider – complemento jQuery gratuito

Permítanme comenzar diciendo que este artículo fue escrito para hablar sobre cómo crear un control deslizante de desplazamiento de imágenes para páginas web. Este artículo no tiene ningún carácter educativo, sólo sirve como ejemplo de cómo se puede implementar nuestro objeto de consideración. Puede utilizar el código proporcionado en este artículo como una especie de plantilla para desarrollos similares. Espero poder transmitir al lector la esencia de lo que he escrito con suficiente detalle y de forma accesible.

Y ahora al grano, no hace mucho tiempo necesitaba instalar un control deslizante en un sitio, pero después de buscar scripts ya preparados en Internet, no encontré nada útil, porque algunos no funcionaron como necesitaba, mientras que otros no se iniciaron en absoluto sin errores en la consola. Usar jQuery - complementos Para ser un control deslizante me pareció demasiado poco interesante, porque... Aunque esto resolverá el problema, no entenderé cómo funciona este mecanismo, y usar un complemento para un solo control deslizante no es muy óptimo. Tampoco tenía muchas ganas de entender guiones torcidos, así que decidí escribir mi propio guión para el control deslizante, que yo mismo marcaría según fuera necesario.

Primero, debemos decidir la lógica del control deslizante en sí y luego proceder a la implementación. En esta etapa, una comprensión clara del funcionamiento de este mecanismo es muy importante, porque sin él no podemos escribir código que funcione exactamente como nosotros. desear.

Nuestro objetivo principal será ventana gráfica, es decir, el bloque en el que veremos cómo giran nuestras imágenes, en él tendremos envoltorio 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 ventana gráfica.

A continuación, en los lados interiores. ventana gráfica, verticalmente en el medio se ubicarán los botones de atrás y adelante, al pulsar sobre ellos también cambiaremos la posición de nuestro envoltorio de diapositivas relativamente ventana gráfica, provocando así el efecto de desplazarse por las imágenes. Y por último, 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 pasaremos a la diapositiva que necesitamos, nuevamente cambiando envoltorio de diapositivas(el cambio se realizará mediante el cambio transformar propiedades css, cuyo valor se calculará constantemente).

Creo que la lógica de cómo funciona todo esto debería quedar clara después de lo que dije anteriormente, pero si aún surgen malentendidos en alguna parte, entonces todo quedará más claro en el código a continuación, solo necesitas un poco de paciencia.

¡Ahora escribamos! Primero que nada, abramos nuestro archivo de índice y escriba el marcado que necesitamos allí:

Como puedes ver, nada complicado, bloque para control deslizante sirve solo como el bloque en el que se colocará nuestro control deslizante, en su interior ya está ventana gráfica, que contiene nuestro envoltorio de diapositivas, también conocida como lista anidada, aquí li son diapositivas y imagen- imágenes dentro de ellos. Preste atención al hecho de que todas las imágenes deben tener el mismo tamaño o al menos las mismas proporciones, de lo contrario el control deslizante se verá torcido, porque sus dimensiones dependen directamente de las proporciones de la imagen.

Ahora necesitamos estilizar todo esto; normalmente los estilos no se comentan particularmente, pero decidí llamar la atención sobre esto para que no haya malentendidos en el futuro.

cuerpo ( margen: 0; relleno: 0; ) #bloque-para-control deslizante ( ancho: 800 px; margen: 0 auto; margen superior: 100 px; ) #viewport ( ancho: 100%; pantalla: tabla; posición: relativa; desbordamiento: oculto; -webkit-user-select: ninguno; -ms-user-select: ninguno; -o-user-select: ninguno; posición: ancho: 100% * 4; : 1s; -función de temporización de transición: entrada y salida fácil; -o-función de temporización de transición: entrada y salida fácil; función de temporización de transición: entrada y salida fácil) #slidewrapper ul, #slidewrapper li ( margen: 0; relleno: 0; ) #slidewrapper li ( ancho: calc(100%/4); estilo de lista: ninguno; visualización: en línea; flotante: izquierda; ) .slide-img ( ancho: 100%; )

Empecemos con bloque para control deslizante, este, repito, es nuestro bloque en la página, el cual asignaremos para el control deslizante, su alto dependerá de su ancho y de las proporciones de nuestra imagen, porque ventana gráfica ocupa todo el ancho bloque para control deslizante, entonces yo mismo deslizar tiene el mismo ancho y, en consecuencia, la imagen que contiene cambia su altura dependiendo del ancho (las proporciones se mantienen). Coloqué este elemento en mi página horizontalmente en el medio, con una sangría de 100 píxeles desde la parte superior, lo que hace que su posición sea más conveniente para el ejemplo.

Elemento ventana gráfica, como ya se mencionó, ocupa todo el ancho de nuestro bloque para control deslizante, tiene la propiedad desbordamiento: oculto, nos permitirá ocultar nuestra fuente de imágenes, que se extiende más allá de la ventana gráfica.

Siguiente propiedad CSS - selección de usuario: ninguna, le permite deshacerse del resaltado azul de los elementos individuales del control deslizante cuando hace clic repetidamente en los botones.

Pasemos a envoltorio de diapositivas, por qué posición: relativa, no absoluto? Todo es muy sencillo, porque... si elegimos la segunda opción, entonces con la propiedad desbordamiento de la ventana gráfica: oculto A nosotros nos parecerá absolutamente nada, porque… mí mismo ventana gráfica no se ajusta a la altura envoltorio de diapositivas, por lo que tendrá altura: 0. ¿Por qué importa el ancho y por qué lo configuramos? El caso es que nuestras diapositivas tendrán un ancho igual a 100% desde la ventana gráfica, y para colocarlos en línea, necesitamos un lugar donde se colocarán, por lo que el ancho envoltorio de diapositivas debería ser igual 100% ancho de ventana gráfica, multiplicado por el número de diapositivas (en mi caso por 4). Acerca de transición Y función de sincronización de transición, entonces aquí 1s significa que un cambio es un cambio de posición envoltorio de diapositivas Sucederá dentro de 1 segundo y lo observaremos, y facilidad de entrada y salida– un tipo de animación en la que comienza lentamente, acelera hasta la mitad y luego vuelve a ralentizarse; aquí puedes configurar los valores a tu discreción;

El siguiente bloque de propiedades especifica envoltorio de diapositivas y sus elementos secundarios tienen relleno cero, no hay comentarios aquí.

A continuación le damos estilo a nuestras diapositivas, su ancho debe ser igual al ancho. ventana gráfica, pero porque ellos estan en envoltorio 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. envoltorio de diapositivas dividir por el número de diapositivas (en mi caso, nuevamente, por 4). Luego los convertimos en elementos en línea con la ayuda pantalla: en línea y establezca el flujo a la izquierda agregando la propiedad flotador: izquierda. Acerca de 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.

Co diapositiva-img Es simple, la imagen ocupará todo el ancho. deslizar, deslizar ajustarse a su altura, envoltorio de diapositivas ajustar a la altura deslizar, y la altura ventana gráfica a su vez tomará el valor de altura envoltorio de diapositivas, por lo tanto, la altura de nuestro control deslizante dependerá de las proporciones de la imagen y del tamaño del bloque provisto para el control deslizante, sobre el cual ya escribí anteriormente.

Creo que en este punto hemos descubierto los estilos, hagamos una presentación de diapositivas simple sin botones por ahora, y después de asegurarnos de que funciona correctamente, los agregaremos y les daremos estilo.

abramos nuestro archivo js, que contendrá el código deslizante, no olvides conectarte jQuery, porque Escribiremos utilizando este marco. Por cierto, al momento de escribir este artículo, estoy usando la versión jQuery 3.1.0. El archivo con el script en sí debe incluirse al final de la etiqueta. cuerpo, porque Trabajaremos con elementos DOM que deben inicializarse primero.

Por ahora necesitamos declarar un par de variables, una almacenará el número de la diapositiva que vemos en un momento determinado en ventana gráfica, la llamé deslizarAhora, y el segundo almacenará el número de estas mismas diapositivas, esto recuento de diapositivas.

var diapositivaAhora = 1; var slideCount = $("#slidewrapper").children().length);

Variable deslizarAhora es necesario establecer el valor inicial 1, porque Cuando se carga la página, según nuestro marcado, veremos la primera diapositiva en ventana gráfica.

EN recuento de diapositivas pondremos el número de niños envoltorio de diapositivas, aquí todo es lógico.
A continuación, necesitas crear una función que se encargará de cambiar las diapositivas de derecha a izquierda, vamos a declararla:

función siguienteDiapositiva() ( )

Lo llamaremos en el bloque principal de nuestro código, al que llegaremos más adelante, pero por ahora le diremos a nuestra función lo que debe hacer:

función nextSlide() ( if (slideNow == slideCount || slideNow<= 0 || slideNow >slideCount) ( $("#slidewrapper").css("transform", "translate(0, 0)"); slideNow = 1; ) else ( TranslateWidth = -$("#viewport").width() * ( slideNow); $("#slidewrapper").css(( "transform": "translate(" + traducirAncho + "px, 0)", "-webkit-transform": "translate(" + traducirAncho + "px, 0 ) )", "-ms-transform": "translate(" + traducirWidth + "px, 0)", )); slideNow++; ) )

Primero, verificamos si actualmente estamos en la última diapositiva de nuestro feed. Para hacer esto, tomamos el número de todas nuestras diapositivas usando $("#slidewrapper").children().longitud y compruébalo con el número de nuestra diapositiva, si resultan ser iguales, entonces esto significa que debemos comenzar a mostrar el feed nuevamente, desde la diapositiva 1, lo que significa que cambiamos transformar propiedad css en envoltorio de diapositivas en traducir(0, 0), cambiándolo así a posición inicial para que la primera diapositiva aparezca en nuestro campo visual, no nos olvidemos tampoco de –webkit y –ms para una visualización adecuada en todos los navegadores (consulte. referencia de propiedades css). Después de esto, no olvides actualizar el valor de la variable. deslizarAhora, diciéndole que la diapositiva número 1 está a la vista: deslizarAhora = 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 nuevamente.

Si no se cumple la primera condición, entonces esto indica que estamos en en este momento No estamos ni en la última diapositiva ni en ninguna inexistente, lo que significa que debemos pasar a la siguiente, lo haremos cambiando envoltorio de diapositivas a la izquierda por un valor igual al ancho ventana gráfica, el desplazamiento se producirá nuevamente a través de la propiedad familiar traducir, cuyo valor será igual "traducir(" + traducirAncho + "px, 0)", Dónde traducirAncho– la distancia a la que nuestro envoltorio de diapositivas. Por cierto, declaremos esta variable al principio de nuestro código:

var traducirAncho = 0;

Después de pasar a la siguiente diapositiva, digámosle a nuestra diapositiva. Ahora que vemos la siguiente diapositiva: deslizarAhora++;

En este punto, algunos lectores se preguntarán por qué no reemplazamos $("#viewport").width() a alguna variable, por ejemplo ancho de diapositiva¿Para tener siempre a mano el ancho de nuestro tobogán? La respuesta es muy simple, si nuestro sitio es adaptativo, entonces, en consecuencia, el bloque asignado para el control deslizante también es adaptativo, en base a esto podemos 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, el ancho de una diapositiva cambiará. En este caso nuestro envoltorio de diapositivas se cambiará al 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 en nuestra función $("#viewport").width() en lugar de ancho de diapositiva Lo obligamos a calcular el ancho cada vez que cambiamos de diapositiva. ventana gráfica, asegurando así que cuando el ancho de la pantalla cambie bruscamente, podamos desplazarnos a la diapositiva que necesitamos.

Sin embargo, hemos escrito una función, ahora necesitamos llamarla después de un cierto intervalo de tiempo, también podemos almacenar el intervalo en una variable para que, si queremos cambiarla, cambiemos solo un valor en el código:

var slideInterval = 2000;

El tiempo en js se indica en milisegundos.

Ahora escribamos la siguiente construcción:

$(documento).ready(función () ( setInterval(nextSlide, slideInterval); ));

Aquí todo no podría ser más sencillo, repasamos el diseño. $(documento).listo(función () ()) estamos hablando de qué próximos pasos debe hacerse después carga completa documento. A continuación, simplemente llamamos a la función siguienteDiapositiva con un intervalo igual a intervalo de diapositivas, usando la función incorporada establecer intervalo.

Después de todas las acciones que realizamos anteriormente, nuestro control deslizante debería girar perfectamente, pero si algo salió mal, entonces el problema podría estar en la versión jQuery, o en conexión incorrecta cualquier archivo. Tampoco es necesario descartar que haya podido cometer un error en alguna parte del código, por lo que sólo puedo aconsejarle que vuelva a comprobar todo.

Mientras tanto, sigamos adelante, agreguemos a nuestro control deslizante una función como detener el desplazamiento al pasar el cursor, para esto necesitamos escribir en el bloque de código principal. (dentro de la construcción $(document).ready(function () ()) esta cosa:

$("#viewport").hover(función())( clearInterval(switchInterval); ),función() ( switchInterval = setInterval(nextSlide, slideInterval); ));

Para comenzar a analizar este código, necesitamos saber qué es cambiarintervalo. En primer lugar, esta es una variable que almacena la llamada periódica a la función nextSlide, en pocas palabras, tenemos esta línea de código: setInterval(siguienteDiapositiva, slideInterval);, se convirtió en esto: switchInterval = setInterval(nextSlide, slideInterval);. Después de estas manipulaciones, nuestro bloque principal de código tomó siguiente vista:

$(documento).ready(función () ( var switchInterval = setInterval(nextSlide, slideInterval); $("#viewport").hover(función())( clearInterval(switchInterval); ),función() ( switchInterval = setInterval (siguienteDiapositiva, diapositivaIntervalo);

Aquí estoy usando evento flotar, que significa "al pasar el cursor", este evento me permite rastrear el momento en que paso el cursor sobre un objeto, en en este caso en ventana gráfica.

Después de pasar el cursor, borro el intervalo, que indico entre paréntesis (este es nuestro cambiarintervalo), luego, separado por comas, escribo lo que haré cuando mueva el cursor hacia atrás, en este bloque asigno nuevamente a nuestro cambiarintervalo llamada de función periódica siguienteDiapositiva.

Ahora, si lo probamos, podemos ver cómo nuestro control deslizante reacciona al pasar el cursor, evitando que el control deslizante cambie.

Ahora es el momento de agregar botones a nuestro control deslizante, comencemos con los botones de avance y retroceso.

Antes que nada, marquémoslos:

En primer lugar este marcado puede ser incomprensible, diré de inmediato que envolví estos dos botones en uno div con clase anterior-siguiente-btns solo para tu comodidad, 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-borde: 50%; arriba: calc(50% - 25px); ) #prev- btn: pasar el cursor, #siguiente-btn: pasar el cursor (cursor: puntero;) #prev-btn (izquierda: 20px;) #siguiente-btn (derecha: 20px;)

Primero colocamos nuestros botones a través de posición:absoluta, por lo tanto controlaremos libremente su posición dentro de nuestro ventana gráfica, luego indicamos los tamaños de estos botones y usando radio-frontera Redondeemos las esquinas para que estos botones se conviertan en círculos. Su color será blanco, es decir. #fff, y su distancia 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 propio botón (en mi caso 25px), de esta forma podemos posicionarlos verticalmente en el centro. A continuación especificaremos que cuando pasemos el cursor sobre ellos, nuestro cursor cambiará a puntero y finalmente, digamos a nuestros botones individualmente que deben retroceder 20 píxeles desde sus bordes para que podamos verlos de la manera que más nos convenga.

Nuevamente, puedes diseñar los elementos de la página como quieras. Solo estoy dando un ejemplo de los estilos que decidí usar.

Después del estilo, nuestro control deslizante debería verse así:

A continuación volvemos a nuestro archivo js, donde describimos el funcionamiento de nuestros botones. Bueno agreguemos una función más, nos mostrará la diapositiva anterior:

función prevSlide() ( if (slideNow == 1 || slideNow<= 0 || slideNow >slideCount) ( traducirAncho = -$("#viewport").width() * (slideCount - 1); $("#slidewrapper").css(( "transformar": "translate(" + traducirAncho + "px, 0 )", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow = slideCount; ) else ( traducirAncho = -$("#viewport").width() * (slideNow - 2); $("#slidewrapper").css(( "transformar": "translate(" + traducirAncho + "px , 0)", "-webkit-transform": "translate(" + TranslateWidth + "px, 0)", "-ms-transform": "translate(" + TranslateWidth + "px, 0)", )); slideNow-- ) )

se llama anteriorDiapositiva, se llamará sólo cuando hagas clic en anterior-btn. Primero comprobamos si estamos en la primera diapositiva o no, aquí también comprobamos si nuestro deslizarAhora más allá de los límites del rango real de nuestras diapositivas y, si se activa alguna de las condiciones, pasaremos a la última diapositiva, cambiando envoltorio de diapositivas al valor que necesitamos. Calcularemos este valor usando la fórmula: (ancho de una diapositiva) * (número de diapositivas - 1), tomamos todo esto con un signo menos, porque 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 deslizarAhora que la última diapositiva está ahora en nuestro campo de visión.

Si no estamos en la primera diapositiva, entonces debemos retroceder 1, para ello volvemos a cambiar la propiedad transformar para slidewrapper. La fórmula es: (ancho de una diapositiva) * (número de la diapositiva actual - 2), nuevamente tomamos todo esto con un signo menos. Pero, ¿por qué -2 y no -1? ¿Necesitamos retroceder solo 1 diapositiva? El hecho es que si estamos, digamos, en la segunda diapositiva, entonces la variable incógnita propiedades transformar: traducir (x, 0) nuestro envoltorio de diapositivas ya es igual al ancho de una diapositiva, si le decimos que debemos restar 1 del número de la diapositiva actual, obtendremos nuevamente uno, por el cual ya nos hemos desplazado envoltorio de diapositivas, por lo que necesitarás cambiar estos mismos anchos a 0 ventana gráfica, que significa en slideNow - 2.

Ahora sólo necesitamos agregar estas líneas al bloque de código principal:

$("#next-btn").click(function() ( nextSlide(); ));

$("#prev-btn").click(function() ( prevSlide(); ));

Aquí simplemente rastreamos si se hizo clic en nuestros botones y, en este caso, llamamos a las funciones que necesitamos, todo es simple y lógico.

Ahora agreguemos botones de navegación de diapositivas y volvamos al marcado nuevamente: ventana gráfica Como puedes ver, dentro Ha aparecido una lista anidada, vamos a darle un identificador. btns de navegación li, dentro de él – nuestros botones de navegación, les asignaremos una clase diapositiva-nav-btn

, sin embargo, podemos terminar con el marcado, pasemos a los estilos:

#nav-btns ( posición: absoluta; ancho: 100%; abajo: 20px; relleno: 0; margen: 0; alineación de texto: centro; ) .slide-nav-btn ( posición: relativa; visualización: bloque en línea; estilo de lista: ninguno; ancho: 20 px; color de fondo: #fff; margen: 3 px; Ha aparecido una lista anidada, vamos a darle un identificador. bloque posición:absoluta, en el que se encuentran nuestros botones, le damos la propiedad ventana gráfica, para que no se estire envoltorio de diapositivas en altura, porque en posición: relativa propiedad , establecemos el ancho al 100% para que usando alineación de texto: centro ventana gráfica centrar los botones horizontalmente en relación con , luego usando la propiedad abajo que nuestro bloque entienda que es de borde inferior

deben estar separados por 20 píxeles. Con los botones hacemos lo mismo que con las diapositivas, pero ahora les damos pantalla: bloque en línea pantalla: en línea, porque en no responden a Y ancho altura radio-frontera, porque están en un bloque absolutamente posicionado. Hagámoslos blancos y usemos lo que ya sabemos.

Démosles la forma de un círculo. Cuando pasemos el cursor sobre ellos, cambiaremos la apariencia de nuestro cursor por la visualización habitual. Ahora comencemos:
jQuery - partes

Primero, declaremos una variable navBtnId, que almacenará el índice del botón en el que hicimos clic:
varnavBtnId = 0;

$(".slide-nav-btn").click(function() ( navBtnId = $(this).index(); if (navBtnId + 1 != slideNow) ( TranslateWidth = -$("#viewport"). ancho() * (navBtnId); $("#slidewrapper").css(( "transform": "translate(" + traducirAncho + "px, 0)", "-webkit-transform": "traducir(" + traducirAncho + "px, 0)", "-ms-transform": "translate(" + traducirWidth + "px, 0)", slideNow = navBtnId + 1 )); – nuestros botones de navegación, les asignaremos una clase Aquí estamos cuando haces clic en nuestro llamar a una función que primero asigna a una variable navBtnId llamar a una función que primero asigna a una variable se registra el valor 1. A continuación hacemos una comprobación donde sumamos. número de serie botón uno, para obtener un número como si la cuenta atrás comenzara no desde 0, sino desde 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 no está a la vista ventana gráfica, luego calculamos la distancia que debemos movernos. envoltorio de diapositivas hacia la izquierda, luego cambie el valor transformar propiedades CSS para traducir(la misma distancia en píxeles, 0). Ya hemos hecho esto 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. deslizarAhora, 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, dejaré un enlace al jsfiddle, donde se proporcionará todo el código escrito en el material.

¡Gracias por su atención!

Etiquetas:

control deslizante jquery
CSS
animación css3
HTML

Agregar etiquetas

Si necesita agregar un control deslizante de imágenes jQuery de alta calidad a su sitio, en este artículo encontrará una descripción. complementos requeridos. Aunque JQuery ha facilitado mucho el trabajo con JavaScript, todavía necesitamos complementos para acelerar el proceso de diseño web.

Podemos realizar cambios en algunos de estos complementos y crear nuevos controles deslizantes que sean mucho más adecuados para los propósitos de nuestro sitio.

Para otros controles deslizantes, simplemente agregue títulos, imágenes y seleccione los efectos de transición de diapositivas que vienen con el control deslizante. Todos estos complementos van acompañados de documentación detallada, por lo que agregarles nuevos efectos o funciones no será difícil. Incluso puedes cambiar los activadores basados en eventos si eres un programador experimentado en JQuery.

Últimas tendencias como diseño responsivo, son muy importantes para proyectos web, ya sea que esté implementando un complemento o un script. Todos estos elementos hacen que cada uno de estos complementos sea muy flexible. Todo lo que salió en 2014 está incluido en esta lista.

controles deslizantes de imágenes jQuery

Control deslizante responsivo Jssor

Recientemente me encontré con este poderoso control deslizante de JQuery y pude comprobar de primera mano que hace muy bien su trabajo. contiene posibilidades ilimitadas, que se puede ampliar debido a la apertura código fuente control deslizante:

Diseño adaptativo;
Más de 15 opciones de personalización;
Más de 15 efectos de cambio de imagen;
Galería de imágenes, carrusel, soporte de tamaño de pantalla completa;
Rotador de banner vertical, lista de diapositivas;
Soporte de vídeo.

Demostración | Descargar

PgwSlider: control deslizante responsivo basado en JQuery/Zepto

La única tarea de este complemento es mostrar diapositivas de imágenes. Es muy compacto, ya que los archivos JQuery tienen un tamaño de sólo 2,5 KB, lo que permite que se cargue realmente rápido:

Diseño adaptativo;
Optimización SEO;
Soporte para diferentes navegadores;
Transiciones de imágenes simples;
El tamaño del archivo es de sólo 2,5 KB.

Demostración | Descargar

Control deslizante vertical de noticias Jquery

Un control deslizante JQuery flexible y útil diseñado para recursos de noticias con una lista de publicaciones en el lado izquierdo y una imagen mostrada en el derecho:

Diseño adaptativo;
Columna vertical para cambiar de noticia;
Encabezados ampliados.

Demostración | Descargar

Control deslizante de golpe

Este control deslizante no contiene jQuery, pero me gustaría presentarlo porque es muy compacto y puede reducir significativamente el tiempo de carga de la página. Déjame saber si te gusta:

Diseño adaptativo;
Diseño sencillo;
Varias opciones de cambio de diapositivas;
Código JavaScript mínimo;
El tamaño es de sólo 3 KB.

Demostración | Descargar

Galería Polaroid de estilo plano

Galería al estilo de documentos esparcidos sobre una mesa con un diseño flexible y hermoso diseño debería ser de interés para muchos de ustedes. Más adecuado para tabletas y pantallas grandes:

Control deslizante adaptativo;
Diseño plano;
Cambio aleatorio de diapositivas;
Acceso completo al código fuente.

Demostración | Descargar

Un control deslizante

Demostración | Descargar

HiSlider: control deslizante de imágenes HTML5, jQuery y WordPress

HiSlider ha introducido un nuevo complemento de control deslizante jQuery gratuito con el que puedes crear una variedad de galerías de imágenes con transiciones fantásticas:

Control deslizante adaptativo;
No requiere conocimientos de programación;
Varias plantillas y máscaras increíbles;
Hermosos efectos de transición;
Soporte para diferentes plataformas;
Compatible con WordPress, Joomla, Drupal;
Capacidad para mostrar contenido. diferentes tipos: imágenes, vídeo de youtube y vídeos de Vimeo;
Configuración flexible;
Funciones adicionales útiles;
Cantidad ilimitada de contenido mostrado.

Demostración |Descargar

Vaya control deslizante

WOW El control deslizante es control deslizante jQuery responsivo imagenes con increibles efectos visuales (dominó, rotar, difuminar, voltear y flashear, volar, persianas) y plantillas profesionales.

WOW Slider viene con un asistente de instalación que le permite crear fantásticos controles deslizantes en segundos sin tener que comprender el código ni editar imágenes. Las versiones del complemento para Joomla y WordPress también están disponibles para descargar:

Totalmente receptivo;
Admite todos los navegadores y todo tipo de dispositivos;
Apoyo dispositivos táctiles;
Fácil instalación en WordPress;
Flexibilidad en la configuración;
Optimizado para SEO.

Demostración |Descargar

Nivo Slider – complemento jQuery gratuito

Nivo Slider es conocido en todo el mundo como el control deslizante de imágenes más bello y fácil de usar. El complemento Nivo Slider es gratuito y se publica bajo la licencia MIT:

Requiere JQuery 1.7 y superior;
Hermosos efectos de transición;
Simple y flexible de configurar;
Compacto y adaptable;
Código abierto;
Potente y simple;
Varias plantillas diferentes;
Recorte automático de imágenes.

Demostración |Descargar

Control deslizante jQuery simple con documentación técnica

La idea se inspiró en los controles deslizantes de Apple, en los que varios elementos pequeños pueden volar con diferentes efectos de animación. Los desarrolladores intentaron implementar este concepto teniendo en cuenta requisitos mínimos crear diseño sencillo una tienda online en la que los elementos “voladores” representan varias categorías:

Diseño adaptativo;
Diseño minimalista;
Varios efectos de abandono y cambio de diapositivas.

Demostración |Descargar

Control deslizante de imagen jQuery de tamaño completo

Un slider muy sencillo que ocupa el 100% del ancho de la página y se adapta a los tamaños de pantalla de los dispositivos móviles. Funciona con transiciones CSS y las imágenes se "apilan" junto con los anclajes. El ancla se puede reemplazar o quitar si no desea adjuntar un enlace a la imagen.

Cuando está instalado, el control deslizante se expande al 100% del ancho de la pantalla. También puede reducir automáticamente el tamaño de las imágenes de diapositivas:

Control deslizante JQuery adaptable;
Tamaño completo;
Diseño minimalista.

Demostración |Descargar

Control deslizante de contenido elástico + tutorial

Elastic Content Slider ajusta automáticamente el ancho y el alto según las dimensiones elemento padre. Este es un control deslizante jQuery simple. Consta de un área de diapositivas en la parte superior y una barra de pestañas de navegación en la parte inferior. El control deslizante ajusta su ancho y alto según las dimensiones del contenedor principal.

Cuando se ven en pantallas de pequeña diagonal, las pestañas de navegación se convierten en pequeños iconos:

Diseño adaptativo;
Desplazamiento con clic del ratón.

Demostración |Descargar

Control deslizante de pila 3D gratuito

Un control deslizante experimental que se desplaza por imágenes en 3D. Las dos pilas se parecen a pilas de papel, de las cuales, al desplazarse, se muestran imágenes en el centro del control deslizante:

Diseño adaptativo;
Voltear - transición;
Efectos 3D.

Demostración |Descargar

Control deslizante de hendidura de pantalla completa basado en JQuery y CSS3 + tutorial

Este tutorial le mostrará cómo crear un control deslizante con un toque especial: la idea es "cortar" y mostrar la diapositiva actual al abrir la siguiente o imagen anterior. Usando animación JQuery y CSS, podemos crear efectos de transición únicos:

Diseño adaptativo;
Transición dividida;
Control deslizante de pantalla completa.

Demostración |Descargar

Unislider: un control deslizante jQuery muy pequeño

Sin detalles innecesarios, con un tamaño inferior a 3 KB. Utilice cualquier código HTML para sus diapositivas, extiéndalo con usando CSS. Todo lo relacionado con Unslider está alojado en GitHub:

Soporte para varios navegadores;
Soporte de teclado;
Ajuste de altura;
Diseño adaptativo;
Soporte de entrada táctil.

Demostración | Descargar

Diapositivas con capacidad de respuesta mínima

Complemento simple y compacto ( el tamaño es solo 1 KB), que crea un control deslizante responsivo utilizando elementos dentro de un contenedor. ResponsiveSLides.js funciona con un gran número Navegadores, incluidas todas las versiones de IE desde IE6 y superiores:

Totalmente receptivo;
Tamaño 1 KB;
Transiciones CSS3 con la capacidad de ejecutarse a través de JavaScript;
Marcado simple mediante listas con viñetas;
Posibilidad de personalizar los efectos de transición y la duración de visualización de una diapositiva;
Admite la capacidad de crear múltiples presentaciones de diapositivas;
Desplazamiento automático y manual.

Demostración |Descargar

Cámara - control deslizante jQuery gratuito

La cámara es un complemento con muchos efectos de transición y un diseño responsivo. Fácil de configurar, compatible con dispositivos móviles:

Diseño totalmente responsivo;
Firmas;
Posibilidad de agregar videos;
33 varios colores iconos

Demostración |Descargar

SlidesJS, complemento jQuery responsivo

SlidesJS es complemento adaptativo para JQuery (1.7.1 y superior) con soporte para dispositivos táctiles y transiciones CSS3. Experimente con él, pruebe algunos ejemplos ya preparados que lo ayudarán a descubrir cómo agregar SlidesJS a su proyecto:

Diseño adaptativo;
transiciones CSS3;
Soporte para dispositivos táctiles;
Fácil de configurar.

Demostración | Descargar

Control deslizante BX Jquery

Este es un control deslizante jQuery responsivo y gratuito:

Totalmente responsivo: se adapta a cualquier dispositivo;
Cambio de diapositiva horizontal, vertical;
Las diapositivas pueden contener imágenes, vídeos o contenido HTML;
Soporte ampliado para dispositivos táctiles;
Uso de transiciones CSS para animación de diapositivas ( aceleración de hardware);
API devoluciones de llamada y métodos completamente públicos;
Tamaño de archivo pequeño;
Fácil de implementar.

Demostración |Descargar

Control deslizante flexible 2

El control deslizante con mejor respuesta. Nueva versión fue modificado para aumentar la velocidad y la compacidad.

Demostración | Descargar

Galleria: galería de fotos responsiva basada en JavaScript

Galleria se utiliza en millones de sitios para crear galerías de imágenes en alta calidad. La cantidad de críticas positivas sobre su trabajo está simplemente fuera de serie:

Completamente gratis;
Modo de visualización de pantalla completa;
100% adaptativo;
No se requiere experiencia en programación;
Soporte para iPhone, iPad y otros dispositivos táctiles;
Flickr, Vimeo, YouTube y más;
Varios temas.

Demostración | Descargar

Blueberry: un control deslizante de imágenes jQuery simple y responsivo

Les presento un control deslizante de imágenes jQuery escrito específicamente para diseño web responsivo. Blueberry es un complemento de control deslizante de imágenes experimental de código abierto que fue escrito específicamente para funcionar con plantillas responsivas:

Diseño minimalista;
Diseño adaptativo;
Presentaciones.

Demostración | Descargar

jQuery Popeye 2.1

Usado elementos estandar primera versión del programa: el control deslizante está oculto en lado izquierdo y flota hacia la derecha. Los mismos elementos de navegación y títulos que aparecen al pasar el mouse:

Diseño adaptativo;
Soporte de firma;
Modo de presentación de diapositivas.

Demostración | Descargar

En Internet puedes encontrar muchos complementos excelentes para creación de jQuery carruseles y controles deslizantes. Le permiten implementar desplazamiento dinámico con efectos adicionales.

Esta es una de las tendencias más populares en diseño web en los últimos años. Además, el uso de bibliotecas listas para usar y complementos de jQuery puede ahorrar mucho tiempo. Todo lo que necesita hacer es proporcionar un enlace a los archivos JavaScript y CSS y luego aplicar el efecto a los elementos HTML deseados.

También puedes instalar configuración propia y estilos CSS. El artículo de hoy tiene como objetivo presentarle los complementos responsivos de jQuery para crear carruseles y controles deslizantes.

Distractful: complemento jQuery para crear un control deslizante de contenido de pantalla completa sensible al tacto

Adaptado control deslizante de pantalla completa Carrusel de contenido habilitado para jQuery pantallas táctiles. El complemento se distribuye bajo acuerdo de licencia LICENCIA PÚBLICA GENERAL GNU v3:

Neoslide: un complemento de carrusel jQuery simple y extensible

Un complemento jQuery simple y extensible que le permitirá utilizar un control deslizante totalmente personalizable en cualquier página web:

Hslider: complemento de galería de imágenes responsiva de ancho completo

Otro complemento para mostrar imágenes usando un carrusel jQuery responsivo con controles y duración de retardo personalizada:

Carousel 3D: complemento de carrusel jQuery con efectos de rotación 3D

Control deslizante elegante: carrusel jQuery responsivo en pantalla completa

Carrusel jQuery en miniatura y atractivo para mostrar contenido e imágenes con varios tipos navegación ( Flechas SVG con miniaturas de imágenes, elementos de paginación o pestañas):

Carrusel PaW: Carrusel Responsivo Desarrollado por jQuery

PaW Carousel (v2) es un complemento en miniatura para crear contenido responsivo y carruseles simples jQuery con miniaturas de imágenes:

Carousel Sharer: carrusel jQuery para volver a publicar en redes sociales

Carousel Sharer es un complemento de jQuery que le permite mostrar varios productos seguidos y permite a los visitantes compartir sus productos en Facebook, Twitter, Google+ y Pinterest:

Simply Carousel: un carrusel de imágenes responsivo minimalista

Simply Carousel es un complemento jQuery pequeño y rápido que le permite crear carruseles y controles deslizantes de imágenes flexibles y receptivos:

Diapositivas: carrusel jQuery responsivo y presentación de diapositivas con soporte táctil

Slides es un complemento jQuery en miniatura para crear carruseles responsivos para un sitio web jQuery con miniaturas, navegación con flechas y la capacidad de usar controles personalizados. Se ha implementado soporte para pantallas táctiles:

carrusel de contenido jQuery

Un carrusel jQuery simple y responsivo con funciones de reproducción automática, controles e incluso funciones de devolución de llamada:

Slick: carrusel jQuery responsivo y flexible

Slick es un complemento "nuevo" para crear anuncios personalizados, responsivos y optimizados. dispositivos móviles Carruseles y controles deslizantes de jQuery que pueden funcionar con cualquier elemento HTML:

bxSlider: control deslizante de contenido HTML jQuery

bxSlider es uno de mejores controles deslizantes jQuery Contenido disponible hoy. Este complemento es perfecto para organizar presentaciones de diapositivas:

CarouFredSel: un complemento de carrusel jQuery potente y flexible

jQuery.carouFredSel es un complemento que convierte cualquier elemento HTML en un carrusel de contenido. Permite desplazar uno o más elementos simultáneamente, tanto horizontal como verticalmente. También puedes habilitar reproducción automática y hacer el desplazamiento infinito:

Carrusel de contenidos ciclistas con jQuery

Un carrusel en el que cada clic te revelará nuevo bloque contenido. Al hacer clic en la cruz se cerrará el bloque activo y nos devolverá a la posición inicial de visualización de miniaturas:

Cloud Carousel: carrusel 3D en Javascript

Este carrusel te permite crear una perspectiva realista. Muchos carruseles jQuery 3D aplican efectos de perspectiva solo al tamaño de la imagen, no a su posición, lo que resulta en una desproporción de elementos en la página:

Elastislide: carrusel responsivo con jQuery

Elastislide es un carrusel jQuery responsivo que se adapta a cualquier tamaño de pantalla. Insertar un carrusel en un contenedor con un ancho flexible hará que el carrusel sea “gomoso”:

jCarrusel Lite

Con este complemento podrás ver imágenes o elementos HTML como un control deslizante. Pesa sólo 2 Kb, pero al mismo tiempo te permite utilizar tu propia configuración:

Carrusel 3D

Cree un carrusel jQuery 3D a partir de imágenes con efectos de sombra y animaciones que reaccionen a la posición del cursor:

Complemento de carrusel JQuery

La configuración de este complemento le permite determinar cuántos elementos se mostrarán en el carrusel, después de lo cual el complemento lo adapta al ancho deseado:

Control deslizante de imagen giratoria usando jQuery

Un control deslizante de imagen asimétrico con una pequeña adición: cuando te desplazas por las imágenes, giran ligeramente. Debido al ligero desplazamiento de los elementos, el control deslizante adquiere una forma inusual:

Carrusel de funciones de jQuery

Este complemento está diseñado para mostrar artículos recomendados en la página de inicio, pero también puede usarse para cualquier otro contenido. Permite mostrar hasta tres imágenes simultáneamente mientras el resto elementos jQuery Los carruseles de contenido están ocultos:

Carrusel infinito de jQuery

Es un complemento jQuery que te permite demostrar cantidad ilimitada Imágenes y vídeos en el carrusel. A diferencia de otros carruseles, Infinite Carousel muestra elementos bucle sin fin sin necesidad de utilizar la navegación:

Complemento jQuery Liquid Carrusel

Liquid Carousel es un complemento diseñado para crear diseños fluidos. Cada vez que el contenedor del carrusel responsivo de jQuery cambia de tamaño, la cantidad de elementos mostrados se ajusta al nuevo ancho:

Carrusel de Jquery MS

Los usos de este complemento son ilimitados: úselo con DIV, LI o cualquier otro elemento. Además, puedes crear tu propio marcado. Cada carrusel tendrá el suyo. apariencia y principio de funcionamiento. Mayoría punto importante es que la herramienta devuelve un objeto carrusel con el que puedes realizar cualquier operación:

Carrusel de rueda hidráulica jQuery

Este complemento jQuery es capaz de mostrar imágenes en estilo en cascada. Se puede colocar tanto horizontal como verticalmente, y también se le puede añadir propios eventos, que se iniciará al desplazarse por las imágenes. Las funciones de devolución de llamada se pueden utilizar como disparador programable para efectos estilo Lightbox o para cargar contenido de otras secciones del sitio:

Nueva versión de RCAROUSEL

1. Carrusel de imágenes jQuery con simulación de efecto 3D

Carrusel 3D con jQuery y CSS3. Con esta solución, puede mostrar el trabajo de su cartera en forma de un control deslizante de desplazamiento. Es posible utilizar con cambio automático diapositivas o sin ellas.

2. Elegante acordeón CSS3 jQuery

Bloques desplegables estilo acordeón en jQuery.

Control deslizante adaptativo que se extiende por todo el ancho de la pantalla. Cuando cambias de diapositiva, el fondo, la imagen, el título y la descripción de la diapositiva se mueven a diferentes velocidades V diferentes direcciones, creando un interesante efecto de paralaje. Hay una función para el desplazamiento automático y manual del control deslizante.

4. Control deslizante jQuery CSS3 con un efecto impresionante

El control deslizante con un impresionante efecto animado se ajusta al tamaño de la pantalla. Atención: el efecto no funciona en Opera.

6. Control deslizante jQuery combinado y acordeón “Slidorion”

Control deslizante y acordeón combinados en un solo complemento.

7. Complemento de presentación de diapositivas jQuery “Cámara”

Presentación de diapositivas con varios efectos de cambio de imagen. Cada diapositiva va acompañada de una descripción. La navegación se puede realizar usando flechas o usando los botones a continuación (aparece una miniatura cuando pasa el cursor sobre ella). Es posible detener el desplazamiento de las diapositivas. Entre otras cosas, la presentación de diapositivas de la cámara se ajusta automáticamente a cualquier tamaño de ventana del navegador.

Complemento "Adipoli" para implementar varios efectos de desplazamiento.

9. Complemento jQuery “Pagescroller”

Complemento para crear navegación en sitios de una página (navegación en forma de panel fijo en la parte superior, menú fijo adicional a la izquierda o derecha). El complemento también le permite implementar un desplazamiento suave de la página hacia arriba y hacia abajo usando flechas.

10. Control deslizante "Secuencia" de jQuery

Control deslizante jQuery en 3 versiones diferentes con diferentes efectos: demo1, demo2, demo3.

11. Nueva versión del complemento “bgStretcher”

Complemento para crear presentaciones de diapositivas imágenes de fondo en el sitio.

El tiempo no se detiene y con él el progreso. Esto también afectó a Internet. Ya puedes ver cómo está cambiando la apariencia de los sitios web; el diseño adaptativo es especialmente popular. Y en este sentido han aparecido bastantes nuevos. adaptado controles deslizantes jquery , galerías, carruseles o complementos similares.
1. Control deslizante de publicaciones horizontales responsivas

Carrusel horizontal adaptativo con instrucciones detalladas en la instalación. Fue completado en estilo sencillo, pero puedes diseñarlo a tu gusto.

2. Control deslizante en Glide.js

Este control deslizante es adecuado para cualquier sitio web. Utiliza Glide.js con fuente abierta. Los colores del control deslizante se pueden cambiar fácilmente.

3. Presentación de diapositivas de contenido inclinado

Control deslizante de contenido responsivo. Lo más destacado de este slider es el efecto 3D de las imágenes, así como diferentes animaciones de apariencia aleatoria.

4. Control deslizante usando lienzo HTML5

Un control deslizante muy hermoso e impresionante con partículas interactivas. Fue realizado utilizando lienzo HTML5,

5. Control deslizante de transformación de imágenes

Control deslizante con efecto de transformación ( Transformación suave de un objeto a otro). EN en este ejemplo El control deslizante es muy adecuado para el portafolio de un desarrollador web o estudio web en forma de portafolio.

6. Control deslizante circular

Control deslizante en forma de círculo con efecto de voltear la imagen.

7. Control deslizante con fondo borroso

Control deslizante adaptativo con cambio y desenfoque de fondo.

8. Control deslizante de moda responsivo

Control deslizante de sitio web simple, liviano y responsivo.

9. Slicebox - control deslizante de imágenes 3D jQuery(ACTUALIZADO)

Versión actualizada del control deslizante Slicebox con correcciones y nuevas funciones.

10.Cuadrícula de imágenes responsiva animada gratuita

Complemento JQuery para crear malla flexible Imágenes que cambiarán de toma usando diferentes animaciones y tiempos. Esto puede quedar bien como fondo o elemento decorativo en una web, ya que de forma selectiva podemos aparecer nuevas imágenes y sus transiciones. El complemento viene en varias versiones.

11.Control deslizante flexible

Un complemento universal gratuito para su sitio web. Este complemento viene en varias opciones de control deslizante y carrusel.

12. Marco de fotos

Fotorama es un complemento universal. Tiene muchas configuraciones, todo funciona de forma rápida y sencilla y puedes ver las diapositivas en pantalla completa. El control deslizante se puede utilizar en ambos tamaño fijo y adaptable, con y sin miniaturas, con y sin desplazamiento circular, y mucho más.

PDInstalé el control deslizante varias veces y creo que es uno de los mejores.

13. Galería deslizante 3D gratuita y adaptable con miniaturas.

Control deslizante de la galería experimental Diseño de panel 3D con malla y efectos interesantes animación.

14. Control deslizante en css3

El control deslizante adaptativo se crea utilizando css3 con una apariencia suave del contenido y una animación ligera.

15. Control deslizante WOW

¡GUAU! Control deslizante es un control deslizante de imágenes con sorprendentes efectos visuales.

17. elástico

Control deslizante elástico con total capacidad de respuesta y miniaturas de diapositivas.

18. Hendidura

Este es un control deslizante que responde a pantalla completa y utiliza animación CSS3. El control deslizante se fabrica en dos versiones. La animación está realizada de forma bastante inusual y hermosa.

19. Galería de fotos adaptable plus

Un simple control deslizante de galería gratuito con carga de imágenes.

20. Control deslizante responsivo para WordPress

Control deslizante gratuito adaptativo para WP.

21. Control deslizante de contenido de paralaje

Slider con efecto parallax y control de cada elemento mediante CSS3.

22. Control deslizante con enlace de música.

Control deslizante utilizando código fuente abierto JPlayer. Este control deslizante se parece a una presentación con música.

23. Control deslizante con jmpress.js

El control deslizante responsivo se basa en jmpress.js y, por lo tanto, le permitirá agregar algunos efectos 3D interesantes a sus diapositivas.

24. Presentación de diapositivas con desplazamiento rápido

Presentación de diapositivas con cambio rápido diapositivas. Las diapositivas cambian al pasar el mouse.

25. Acordeón de imágenes con CSS3

Imagen de acordeón usando css3.

26. Un complemento de galería táctil optimizado

Esta es una galería responsiva optimizada para dispositivos táctiles.

27. Galería 3D

Galería de pared 3D- creado para el navegador Safari, donde será visible el efecto 3D. Si lo miras en otro navegador, la funcionalidad estará bien pero el efecto 3D no será visible.

28. Control deslizante con paginación.

Control deslizante responsivo con paginación usando control deslizante jQuery interfaz de usuario La idea es utilizar un concepto de navegación simple. Es posible rebobinar todas las imágenes o cambiar diapositiva por diapositiva.

29.Montaje de imágenes con jQuery