Control deslizante simple con vista previa de jquery. Control deslizante simple con botones de control hacia adelante y hacia atrás

Para empezar, este artículo fue escrito con el objetivo de decirle cómo crear un control deslizante de desplazamiento de imágenes para páginas web. Este artículo no es de ningún modo educativo por naturaleza, solo sirve como ejemplo de cómo se puede implementar nuestro objeto de consideración. Puede usar el código provisto en este artículo como una especie de plantilla para tales desarrollos, espero poder transmitir toda la esencia de lo que he escrito al lector con suficiente detalle y de una manera accesible.

Y ahora, al grano, no hace mucho tiempo necesitaba poner un control deslizante en un sitio, pero después de buscar en Internet scripts prefabricados, no encontré nada que valiera la pena. algunos no funcionaron como necesitaba, mientras que otros no se iniciaron en absoluto sin errores en la consola. Usar jQuery - complementos me pareció demasiado poco interesante para el control deslizante, tk. Aunque resolveré el problema con esto, no comprenderé el funcionamiento de este mecanismo, y usar el complemento por el bien de un control deslizante no es muy óptimo. Tampoco quería entender los guiones torcidos, por eso decidí escribir mi propio guión para el control deslizante, que yo mismo marcaré según sea necesario.

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

Nuestro principal objeto será ventana gráfica, es decir, un bloque en el que veremos como van girando nuestras imágenes, en él tendremos envoltura de diapositivas, este será nuestro bloque que contendrá todas las imágenes, alineadas en una línea, y que cambiará su posición dentro del mismo ventana gráfica.


Además, en los lados del interior ventana gráfica, verticalmente en el medio, se ubicarán los botones de retroceso y avance, al hacer clic en el cual también cambiaremos la posición de nuestro envoltura de diapositivas relativamente ventana gráfica, lo que provoca el efecto de desplazarse por las imágenes. Y finalmente, el último objeto serán nuestros botones de navegación ubicados en la parte inferior. ventana gráfica.


Al hacer clic en ellos, simplemente miraremos el número de serie de este botón y pasaremos a la diapositiva que necesitamos, nuevamente desplazando envoltura de diapositivas(la compensación se realizará mediante el cambio transformar propiedades css, cuyo valor se calculará constantemente).

Creo que la lógica de todo este caso debería quedar clara después de lo que dije anteriormente, pero si todavía hay malentendidos en alguna parte, entonces todo se aclarará en el código a continuación, solo necesita un poco de paciencia.

¡Ahora escribamos! En primer lugar, abriremos nuestro archivo de índice y escriba el marcado que necesitamos allí:

Como ves nada complicado bloque-para-deslizador sirve como el mismo bloque en el que se colocará nuestro control deslizante, dentro de él mismo ventana gráfica en el que nuestro envoltura de diapositivas, también conocida como lista anidada, aquí li son diapositivas y img- imágenes en su interior. Preste atención al hecho de que todas las imágenes deben ser del mismo tamaño o, al menos, proporciones; de lo contrario, el control deslizante se verá torcido, tk. sus dimensiones dependen directamente de la relación de aspecto de la imagen.

Ahora tenemos que estilizar todo, generalmente los estilos no se comentan realmente, pero decidí llamar la atención sobre esto, para que no haya malentendidos en el futuro.

Empecemos con bloque-para-deslizador, este, nuevamente, es nuestro bloque en la página, el cual dejaremos a un lado para el slider, su altura dependerá de su ancho y de las proporciones de nuestra imagen, ya que ventana gráfica ocupa todo el ancho bloque-para-deslizador entonces yo mismo diapositiva tiene el mismo ancho y, en consecuencia, la imagen en su interior cambia su altura dependiendo del ancho (las proporciones se conservan). Coloqué este elemento horizontalmente en el medio de mi página, rellenando 100px desde la parte superior, haciendo que su posición sea más conveniente para un ejemplo.

Elemento ventana gráfica, como ya se mencionó, ocupa todo el ancho de nuestro bloque-para-deslizador, tiene la propiedad desbordamiento: oculto, nos permitirá ocultar nuestro feed de imágenes, que saldrá de la ventana gráfica.


Siguiente propiedad css - selección de usuario: ninguna, le permite deshacerse de la selección azul elementos individuales control deslizante con múltiples clics de botones.

Moviéndose a envoltura de diapositivas por qué posición: relativa, pero no absoluto? Todo es muy simple, tk. si elegimos la segunda opción, entonces con la propiedad Desbordamiento de la ventana gráfica: oculto absolutamente nada nos parecerá, tk. yo mismo ventana gráfica no se ajustará a la altura envoltura de diapositivas, por lo que tendré altura: 0... ¿Por qué es tan importante el ancho y por qué lo configuramos? El caso es que nuestras diapositivas tendrán un ancho igual a 100% de la ventana gráfica, y para organizarlos en una línea, necesitamos un lugar donde se colocarán, por lo tanto, el ancho envoltura de diapositivas debería ser igual Ancho de la ventana gráfica del 100% multiplicado por el número de diapositivas (en mi caso, 4). Sobre transición y función de tiempo de transición entonces aqui 1 s significa que un cambio de posición envoltura de diapositivas ocurrirá dentro de 1 segundo y lo observaremos, y facilidad de entrada-salida- el tipo de animación en la que primero va lentamente, acelera hacia la mitad y luego vuelve a ralentizarse, aquí ya puede establecer los valores a su discreción.

El siguiente bloque de conjuntos de propiedades envoltura de diapositivas y sus hijos tienen relleno de ceros, los comentarios son innecesarios aquí.

A continuación, aplicaremos estilo a nuestras diapositivas, su ancho debe ser igual al ancho. ventana gráfica, pero desde ellos están en envoltura de diapositivas, cuyo ancho es igual al ancho de la ventana gráfica multiplicado por el número de diapositivas, luego para obtener el ancho ventana gráfica de nuevo, necesitamos el 100% del ancho envoltura de diapositivas dividir por el número de diapositivas (en mi caso, nuevamente, por 4). Luego los convertimos en elementos en línea usando pantalla: en línea y establezca el flujo a la izquierda agregando la propiedad flotador izquierdo... Sobre estilo de lista: ninguno Puedo decir que lo uso para eliminar el marcador predeterminado de li, en la mayoría de los casos es una especie de estándar.

Con slide-img todo es simple, la imagen ocupará todo el ancho diapositiva, diapositiva se ajusta a su altura, envoltura de diapositivas se ajusta a la altura diapositiva y la altura ventana gráfica a su vez tomará el valor de la altura envoltura de diapositivas, por lo tanto, la altura de nuestro control deslizante dependerá de la relación de aspecto de la imagen y el tamaño del bloque proporcionado para el control deslizante, sobre el que ya escribí anteriormente.

Creo que aquí es donde descubrimos los estilos, hagamos una presentación de diapositivas simple sin botones por ahora, y después de asegurarnos de que funciona correctamente, agreguemos y diseñemos.

Abramos nuestro archivo js, que contendrá el código del control deslizante, no olvide incluir jQuery ya que escribiremos usando este marco. Por cierto, en el momento de escribir este artículo, estoy usando la versión jQuery 3.1.0... El archivo con el propio script debe incluirse al final de la etiqueta. cuerpo ya que trabajaremos con los elementos DOM que deben inicializarse primero.

Por ahora, necesitamos declarar un par de variables, una almacenará el número de diapositiva que vemos en un momento determinado en ventana gráfica, La nombré slideNow, y el segundo almacenará el número de estas mismas diapositivas, esto es slideCount.

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

V slideCount pondremos el numero de niños envoltura de diapositivas, todo es lógico aquí.
A continuación, debe crear una función que se encargará de cambiar las diapositivas de derecha a izquierda, la declararemos:

Lo llamaremos en el bloque principal de nuestro código, al que llegaremos, pero por ahora le diremos a nuestra función qué debe hacer:

Primero, verificamos si ahora estamos en la última diapositiva de nuestro feed. Para hacer esto, tomamos el número de todas nuestras diapositivas usando $ ("# slidewrapper"). children (). length y verifíquelo con el número de nuestra diapositiva, si resultan ser iguales, entonces esto significa que debemos comenzar a mostrar la cinta nuevamente, desde 1 diapositiva, lo que significa que cambiamos propiedad de transformación css a envoltura de diapositivas sobre traducir (0, 0), desplazándola así a su posición original para que aparezca la primera diapositiva en nuestro campo de visión, no te olvides también de –Kit web y –ms para una visualización adecuada en varios navegadores (consulte. referencia de propiedades CSS). Después de eso, no olvidemos actualizar el valor de la variable. slideNow, informándole que la diapositiva número 1 está en su campo de visión: slideNow = 1;

La misma condición incluye comprobar que el número de la diapositiva que vemos está dentro de los límites del número de nuestras diapositivas, si de alguna manera esto no se cumple, entonces volveremos a la 1ª diapositiva.

Si no se cumple la primera condición, esto indica que estamos en este momento no estamos en la última diapositiva, o en alguna inexistente, lo que significa que debemos cambiar a la siguiente, lo haremos cambiando envoltura de diapositivas a la izquierda por un valor igual al ancho ventana gráfica, el desplazamiento ocurrirá nuevamente a través de la propiedad familiar traducir cuyo valor será igual a "translate (" + translateWidth + "px, 0)", dónde translateWidth- la distancia por la cual nuestro envoltura de diapositivas... Por cierto, declaremos esta variable al principio de nuestro código:

Después de pasar a la siguiente diapositiva, dígale a nuestra slideNow que vemos la siguiente diapositiva: slideNow ++;

Por el momento, algunos lectores pueden tener una pregunta: ¿por qué no reemplazamos $ ("# viewport"). width () a alguna variable, por ejemplo slideWidth para tener siempre a mano el ancho de nuestro tobogán? La respuesta es muy simple, si nuestro sitio responde, entonces, en consecuencia, el bloque asignado para el control deslizante también es adaptativo, de esto se puede entender que al cambiar el tamaño del ancho de la ventana sin recargar la página (por ejemplo, girar el teléfono de lado), el ancho ventana gráfica cambiará y, en consecuencia, también cambiará el ancho de una diapositiva. En este caso, nuestro envoltura de diapositivas se desplazará por el valor del ancho original, lo que significa que las imágenes se mostrarán en partes o no se mostrarán en absoluto en ventana gráfica... Escribiendo a nuestra función $ ("# viewport"). width () en lugar de slideWidth hacemos que calcule el ancho cada vez que cambiamos de diapositiva ventana gráfica, proporcionando así un desplazamiento a la diapositiva deseada cuando el ancho de la pantalla cambia abruptamente.

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

El tiempo en js se especifica en milisegundos.

Ahora escribamos la siguiente construcción:

Todo es más fácil en ninguna parte, estamos a través de la construcción. $ (documento) .ready (función () ()) Decimos que las siguientes acciones deben realizarse después de que el documento esté completamente cargado. Entonces simplemente llamamos a la función la siguiente diapositiva con un intervalo igual a slideInterval, usando la función incorporada setInterval.

Después de todas las acciones que realizamos anteriormente, nuestro control deslizante debería girar bien, pero si algo salió mal contigo, entonces el problema puede estar en la versión jQuery, ya sea en conexión incorrecta cualquier archivo. Además, no es necesario excluir que podría haber cometido un error en alguna parte del código, por lo que solo puedo aconsejarle que vuelva a verificar todo.


Mientras tanto, continúe, agregue a nuestro control deslizante una función como dejar de desplazarse al desplazarse, para esto necesitamos escribir en el bloque principal de código (dentro de $ (documento) .ready (function () ())) tal cosa:

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

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

Después de pasar el mouse, borro el espacio, que indicaré entre paréntesis (este es nuestro switchInterval), luego, separados por comas, escribo lo que haré cuando mueva el cursor hacia atrás, en este bloque vuelvo a asignar a nuestro switchInterval llamada de función periódica la siguiente diapositiva.

Ahora, si lo comprobamos, veremos cómo reacciona nuestro control deslizante al pasar el mouse, deteniendo el cambio de diapositiva.

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

Primero que nada, vamos a marcarlos:

Al principio, este marcado puede ser incomprensible, diré de inmediato que envolví estos dos botones en uno div con clase prev-next-btns solo para tu conveniencia, no tienes que hacer esto, el resultado no cambiará, ahora les agregaremos estilos y todo quedará claro:

Primero, colocamos nuestros botones a través de posición: absoluta, de ese modo controlaremos libremente su posición dentro de nuestra ventana gráfica, luego indicaremos los tamaños de estos botones y usando radio de borde redondee las esquinas para que estos botones se conviertan en círculos. Su color será el blanco, es decir #fff, y su sangría desde el borde superior ventana gráfica será igual a la mitad de la altura de este ventana gráfica menos la mitad de la altura del botón en sí (en mi caso 25px) para que podamos colocarlos verticalmente en el centro. A continuación, indicaremos que cuando pasemos el cursor sobre ellos, nuestro cursor cambiará a puntero y finalmente decirle a nuestros botones individualmente que sangran 20px desde sus bordes para que podamos verlos como mejor nos parezca.

Nuevamente, puede diseñar los elementos de la página como desee, solo estoy dando un ejemplo de los estilos que decidí usar.

Después de diseñar, nuestro control deslizante debería verse así:


A continuación, regrese a nuestro archivo js donde describimos cómo funcionan nuestros botones. Bueno, agreguemos otra función, nos mostrará la diapositiva anterior:

Se llama prevSlide, se llamará solo cuando haga clic en prev-btn... Primero, verificamos si estamos en la 1ra diapositiva o no, aquí también verificamos si nuestro slideNow más allá de los límites del rango real de nuestras diapositivas y, si alguna de las condiciones funciona, pasaremos a la última diapositiva cambiando envoltura de diapositivas al valor que necesitamos. Calcularemos este valor por la fórmula: (ancho de una diapositiva) * (número de diapositivas - 1), tomamos todo esto con un signo menos, ya que lo desplazamos hacia la izquierda, resulta que ventana gráfica ahora nos mostrará la última diapositiva. Al final de este bloque, también necesitamos decirle a la variable slideNow que la última diapositiva está ahora en nuestro campo de visión.

Si no estamos en la primera diapositiva, entonces necesitamos mover 1 hacia atrás, para esto volvemos a cambiar la propiedad transformar para envoltura de diapositivas... La fórmula es la siguiente: (ancho de una diapositiva) * (número de la diapositiva actual - 2), nuevamente, tomamos todo esto con un signo menos. Pero, ¿por qué es -2 y no -1, necesitamos mover solo 1 diapositiva hacia atrás? El hecho es que si estamos, digamos, en la segunda diapositiva, entonces la variable X propiedades transformar: traducir (x, 0) nuestro envoltura de diapositivas ya es igual al ancho de una diapositiva, si le decimos que tenemos que restar 1 del número de la diapositiva actual, obtendremos nuevamente la unidad por la que ya está desplazada envoltura de diapositivas, por lo que deberá cambiar estos mismos anchos en 0 ventana gráfica, lo que significa en slideNow - 2.

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

Aquí solo hacemos un seguimiento de si se hizo un clic en nuestros botones, y en este caso llamamos a las funciones que necesitamos, todo es simple y lógico.

Ahora agreguemos los botones de navegación de diapositivas, de vuelta al marcado:

Como puedes ver, por dentro ventana gráfica apareció una lista anidada, dale un identificador nav-btns, dentro de eso li- nuestros botones de navegación, les asignaremos una clase slide-nav-btn, sin embargo, podemos terminar con el marcado, vayamos a los estilos:

Blok nav-btns, en el que se encuentran nuestros botones, le damos la propiedad posición: absoluta, para que no se estire ventana gráfica en altura, porque a envoltura de diapositivas propiedad posición: relativa, establecemos el ancho al 100% para que al usar alineación de texto: centro botones centrales horizontalmente relativos ventana gráfica, luego usando la propiedad fondo dejamos claro a nuestro bloque que debe estar a una distancia de 20px del borde inferior.

Hacemos lo mismo con los botones que con las diapositivas, pero ahora los configuramos pantalla: bloque en línea ya que a pantalla: en línea ellos no reaccionan a ancho y altura ya que están en un bloque absolutamente posicionado. Los haremos blancos y con la ayuda de los que ya nos son familiares. radio de borde démosles forma de círculo. Cuando pase el cursor sobre ellos, cambiaremos la apariencia de nuestro cursor por la pantalla habitual.

Ahora vayamos a jQuery - piezas:
Primero, declaremos la variable navBtnId, que almacenará el índice del botón en el que hicimos clic:

Aquí estamos al hacer clic en nuestro slide-nav-btn llamamos a la función, que en primer lugar se asigna a la variable navBtnId el índice del botón en el que se hizo clic, es decir, su número ordinal, ya que el conteo comienza desde cero, luego si hacemos clic en el segundo botón, entonces en navBtnId el valor se escribe 1. Luego, hacemos una verificación, donde agregamos uno al número ordinal del botón para obtener un número tal como si la cuenta regresiva no fuera de 0, sino de 1, comparamos este número con el número de la diapositiva actual, si coinciden, entonces no realizaremos ninguna acción, porque la diapositiva deseada ya está en ventana gráfica.

Si el tobogán que necesitamos está fuera de vista ventana gráfica, luego calculamos la distancia en la que debemos desplazarnos envoltura de diapositivas a la izquierda, luego cambie el valor css transform propiedades en translate(la misma distancia en píxeles, 0). Ya lo hemos hecho más de una vez, por lo que no debería haber preguntas. Al final, volvemos a guardar el valor de la diapositiva actual en una variable. slideNow, este valor se puede calcular agregando uno al índice del botón en el que se hizo clic.

Eso es todo, de hecho, si algo no está claro, entonces dejo un enlace al jsfiddle, donde se proporcionará todo el código escrito en el material.

¡Gracias por la atención!

Etiquetas:

• control deslizante jquery
• css
• animación css3
• html

Control deslizante simple y liviano (21 Kb comprimido) escrito en Javascript puro, sin dependencias, es decir, funciona sin jQuery.

Probado en los siguientes navegadores:

• Chrome 26.0
• Firefox 20.0
• Safari 5.1.7
• IE 10
• Opera 16.0

Hay soporte incompleto para IE8 / 9 (sin efectos).

Peculiaridades

• Puede agregar un número ilimitado de controles deslizantes a la página, incluso colocar uno dentro del otro.
• Cambia el tamaño según el contenido, pero se puede deshabilitar.
• Navegación por teclado: cuando el cursor está en el control deslizante, puede alternar los controles deslizantes de flecha.
• Soporte para eventos táctiles móviles.

Conexión

Antes de la etiqueta de cierre Necesito conectar slidr.js o slidr.min.js expediente.

Marcado HTML

slidr.js puede trabajar con cualquier elemento de bloque en línea, bloque en línea, que tenga un atributo id. Se permite utilizar cualquier elemento secundario de primer nivel con el atributo data-slidr, por ejemplo:

• manzana
• Plátano
• Coco

Javascript

Después de conectar slidr.js el objeto slidr global estará disponible. La forma más sencilla de crear un slidr es:

Slidr.create ("slidr-id"). Inicio ();

Llamar con todas las configuraciones:

Slidr.create ("slidr-id", (after: function (e) (console.log ("in:" + e.in.slidr);), before: function (e) (console.log ("out: "+ e.out.slidr);), migas de pan: verdadero, controles:" esquina ", dirección:" vertical ", fundido: falso, teclado: verdadero, desbordamiento: verdadero, tema:" # 222 ", tiempo: (" cube ":" 0.5s de entrada fácil "), touch: true, transición:" cube ")). start ();

Ajustes

Todas las configuraciones disponibles para slidr.js se muestran en la siguiente tabla.

Las funciones de devolución de llamada antes y después reciben los siguientes datos:

(id: "slidr-id", en: (el: # , slidr: "data-slidr-in", trans: "transición-in", dir: "direction-in"), out: (el: # , slidr: "data-slidr-out", trans: "transición-out", dir: "direction-out"))

API global de Slider.js

El espacio de nombres global slidr proporciona la siguiente funcionalidad:

/ ** * Versión actual * @return (string) major.minor.patch. * / versión de función () (); / ** * Efectos de transición disponibles. * @return (Matriz) de transiciones. * / función transiciones () (); / ** * Crea y devuelve Slidr. * Llamar a esta función dos veces en el mismo elemento devolverá el objeto Slidr ya creado. * ID de elemento @param (cadena) para Slidr. * @param (Object =) opt_settings Configuración del control deslizante. * / función crear (id, opt_settings) ();

API deslizante

Entrada corta

Var s = slidr.create ("slidr-api-demo", (breadcrumbs: true, overflow: true)). Agregar ("h", ["uno", "dos", "tres", "uno"]) .add ("v", ["cinco", "cuatro", "tres", "cinco"], "cubo") .start ();

La lista completa de funciones de la API de Slidr.js se presenta a continuación.

/ ** * ¡Inicie Slidr! * Encuentra automáticamente diapositivas para crear si no se agregó nada antes de llamar a start (). * @param (cadena) opt_start `data-slidr` id para comenzar. * @return (esto) * / function start (opt_start) (); / ** * Compruebe si podemos deslizarnos. * @param (cadena) junto a una dirección ("arriba", "abajo", "izquierda", "derecha") o una identificación de `data-slidr`. * @return (booleano) * / function canSlide (siguiente) (); / ** * ¡Diapositiva! * @param (cadena) junto a una dirección ("arriba", "abajo", "izquierda", "derecha") o una identificación de `data-slidr`. * @return (esto) * / function slide (siguiente) (); / ** * Agrega un conjunto de diapositivas. * @param (cadena) dirección `horizontal || h` o `vertical || v`. * @param (Array) ids Una lista de `data-slidr` id" s para agregar a Slidr. Las diapositivas deben ser hijos directos de Slidr. * @param (string =) opt_transition La transición para aplicar entre las diapositivas, o usos el predeterminado. * @param (boolean =) opt_overwrite Si se sobrescriben las asignaciones / transiciones de diapositivas existentes si ocurren conflictos. * @return (this) * / function add (direction, ids, opt_transition, opt_overwrite) (); / ** * Automáticamente avanzar a la siguiente diapositiva después de un cierto tiempo de espera. Las llamadas comienzan () si aún no se han llamado. * @param (int =) opt_msec El número de milisegundos entre cada transición de diapositiva. El valor predeterminado es 5000 (5 segundos). * @param (string = ) opt_direction "up", "down", "left", o "right". El valor predeterminado es "right". * @param (string =) opt_start La identificación de `data-slidr` para comenzar (solo funciona si se llama auto para iniciar el Slidr). * @return (this) * / function auto (opt_msec, opt_direction, opt_start) (); / ** * Detener la transición automática si está activado. * @return (esto) * / function stop () (); / ** * Establecer tiempos de animación personalizados. * @param (cadena | Objeto) transición O un nombre de transición (es decir, "cubo"), o un objeto ("transición": "tiempo"). * @param (string =) opt_timing El nuevo tiempo de animación (es decir, "entrada fácil de 0,5 s"). No es necesario si la transición es un objeto. * @return (esto) * / function timing (transición, opt_timing) (); / ** * Alternar ruta de navegación. * @return (esto) * / function breadcrumbs () (); / ** * Alternar controles. * @param (string =) opt_scheme Activar / desactivar si no está presente, de lo contrario cambiar el diseño. "borde", `esquina` o` ninguno`. * @return (esto) * / controles de función (opt_scheme) ();

Desplazarse por la página mientras cambia las diapositivas

Este desagradable error aparece en algunos navegadores. Para solucionarlo, debe agregar estilo al cuerpo:

Cuerpo (desbordamiento: oculto;)

Cambio de tamaño dinámico

Slidr "comprende" si es necesario cambiar el tamaño del control deslizante para que se ajuste a la imagen. Si el bloque deslizante tiene dimensiones especificadas, Slidr no las cambiará automáticamente. Si se especifican las propiedades min-width y min-height, el control deslizante cambiará de tamaño para adaptarse al contenido, teniendo en cuenta estos valores. De lo contrario, el tamaño se realizará automáticamente.

Cambio de tamaño automático

Dimensiones estáticas

Controles deslizantes

El marcado de los controles es el siguiente:

Puede personalizar cualquier control deslizante mediante selectores CSS:

Aparte .slidr-control.right (width: 50px! Important; height: 50px! Important; top: 50%! Important; margin-top: -25px! Important; right: -25px! Important; border-radius: 25px; background : url ("/ static / images / arrow_right.png") 14px 13px negro sin repetición; opacidad: 0.4;) a un lado .slidr-control.right: hover (opacidad: 1;)

El control de flecha se implementa con el pseudo selector: after, por lo que para ocultarlo, use el siguiente código:

// Ocultar una sola flecha dentro de un solo controlador. aparte .slidr-control.right: after (border-color: transparent! important;) // Ocultar todas las flechas dentro de un solo controlador. aparte .slidr-control: after (border-color: transparent! important;) // Ocultar todas las flechas Slidr. aparte .slidr-control: after (border-color: transparent! important;)

Pan rallado Slidr

Las migas de pan tienen un marcado HTML simple. Cada ul representa una línea completa y cada li representa una ruta de navegación separada:

Diseñar migas de pan con CSS:

// Personaliza la posición, el tamaño, el color del borde y el color de fondo. aparte (derecha: 50%! importante; margen-derecha: -41px! importante;) aparte .slidr-breadcrumbs li (ancho: 15px! importante; alto: 15px! importante; margen: 3px! importante;) aparte .slidr-breadcrumbs li.normal (color de borde: blanco! importante;) aparte .slidr-breadcrumbs li.active (color de fondo: negro! importante;)

Licencia

Este software es de uso gratuito bajo la licencia MIT.

El tiempo no se detiene y con él avanza. Esto también afectó la inmensidad de Internet. Ya puede ver cómo está cambiando la apariencia de los sitios, el diseño receptivo es especialmente popular. Y en este sentido, han aparecido bastantes nuevos. controles deslizantes de jquery sensibles, galerías, carruseles o complementos similares.
1. Control deslizante de postes horizontales receptivos

Carrusel horizontal adaptable con instrucciones detalladas de instalación. Está hecho en un estilo simple, pero puedes diseñarlo como quieras.

2. Control deslizante en Glide.js

Este control deslizante es adecuado para cualquier sitio. Utiliza Glide.js de código abierto. Los colores del control deslizante se pueden cambiar fácilmente.

3. Presentación de diapositivas de contenido inclinado

Control deslizante de contenido receptivo. Lo más destacado de este control deslizante es el efecto 3D de las imágenes, así como las diferentes animaciones de apariencia en orden aleatorio.

4. Control deslizante con lienzo HTML5

Deslizador muy bonito e impresionante con partículas interactivas. Se ejecuta mediante lienzo HTML5,

5. Control deslizante "Transformación de imágenes"

Control deslizante con efecto morphing (transformación suave de un objeto a otro). En este ejemplo, el control deslizante funciona bien para el portafolio de un desarrollador web o un estudio web como portafolio.

6. Control deslizante circular

Un control deslizante en forma de círculo con un efecto de cambio de imagen.

7. Control deslizante de fondo borroso

Control deslizante adaptable con alternar y desenfocar el fondo.

8. Control deslizante de moda adaptable

Control deslizante de sitio web simple, liviano y receptivo.

9. Slicebox - control deslizante de imagen jQuery 3D(ACTUALIZADO)

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

Cuadrícula de imágenes receptivas animadas gratis

Un complemento de jQuery para crear una cuadrícula de imágenes flexible que cambiará tomas usando diferentes animaciones y tiempos. Esto puede funcionar bien como fondo o elemento decorativo en el sitio, ya que podemos personalizar la apariencia de nuevas imágenes y sus transiciones. El complemento está hecho en varias versiones.

11. Flexslider

Complemento gratuito universal para su sitio web. Este complemento viene con varias opciones de deslizador y carrusel.

12. Marco de fotos

Fotorama es un complemento versátil. Tiene muchas configuraciones, todo funciona rápida y fácilmente, existe la posibilidad de ver diapositivas en pantalla completa. El control deslizante se puede usar tanto en tamaño fijo como receptivo, con o sin miniaturas, con o sin desplazamiento circular, y mucho más.

PDPongo el control deslizante varias veces y creo que es uno de los mejores

13. Control deslizante de galería 3D gratuito y receptivo con miniaturas.

Control deslizante de la galería experimental 3DPanelLayout con malla e interesantes efectos de animación.

14. Control deslizante en css3

El control deslizante receptivo está hecho en css3 con un flujo de contenido suave y una animación ligera.

15. Deslizador WOW

Deslizador de wow es un control deslizante de imágenes con imágenes asombrosas.

17. Elástico

Control deslizante elástico totalmente sensible con miniaturas de diapositivas.

18. Hendidura

Es un control deslizante sensible a pantalla completa que usa animación css3. El control deslizante está hecho en dos versiones. la animación es bastante inusual y hermosa.

19.Galería de fotos adaptable plus

Una sencilla galería deslizante gratuita con imágenes cargadas.

20. Control deslizante receptivo para WordPress

Control deslizante gratuito receptivo para WP.

21. Control deslizante de contenido de Parallax

Slider con efecto de paralaje y control de cada elemento con CSS3.

22. Control deslizante con música de enlace

Control deslizante con JPlayer de código abierto. Este control deslizante se asemeja a una presentación con música.

23. Control deslizante con jmpress.js

El control deslizante sensible se basa en jmpress.js y, por lo tanto, le permite usar algunos efectos 3D geniales en sus diapositivas.

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

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

25. Acordeón de imagen con CSS3

Acordeón de imágenes usando css3.

26. Un complemento de galería optimizado por toque

Es una galería receptiva que está optimizada para dispositivos táctiles.

27.3D Galería

Galería de pared 3D- creado para el navegador Safari, donde el efecto 3D será visible. Visto en un navegador diferente, la funcionalidad estará bien, pero el efecto 3D no será visible.

28. Control deslizante de paginación

Control deslizante de paginación receptiva con control deslizante jQuery UI. la idea es utilizar un concepto de navegación simple. Es posible rebobinar todas las imágenes o cambiar de diapositiva a diapositiva.

29 Montaje de imagen con jQuery

Posicionamiento automático de imágenes en función del ancho de la pantalla. Algo muy útil al desarrollar un sitio de cartera.

Galería 30.3D

Control deslizante circular 3D simple en css3 y jQuery.

31. Modo de pantalla completa con efecto 3D en css3 y jQuery

Control deslizante de pantalla completa con hermosa transición.

Necesitamos un control deslizante simple con desplazamiento automático. Empecemos ...

Descripción del trabajo del control deslizante.

Las diapositivas se alinearán y desplazarán después de un cierto período de tiempo.

El marco rojo muestra la parte visible del control deslizante.

Al final del control deslizante, debe duplicar la primera diapositiva. Esto es necesario para garantizar el desplazamiento de la tercera diapositiva a la primera. También debe agregar la última diapositiva al principio para poder desplazarse hacia atrás desde la primera diapositiva hasta la tercera. A continuación se muestra cómo funciona el control deslizante en la dirección de avance.

Cuando el control deslizante llega al final, se coloca instantáneamente una copia desde el principio del control deslizante en lugar de la última diapositiva. Luego, el ciclo se repite nuevamente. Esto crea la ilusión de un control deslizante sin fin.

Marcado HTML

Primero, hagamos un control deslizante de desplazamiento automático simple. Necesita dos contenedores para funcionar. El primero establecerá el tamaño del área visible del control deslizante, y el segundo es necesario para colocar los controles deslizantes en él. El marcado del control deslizante se verá así:

> >

Estilos de control deslizante

.slider-box (ancho: 320px; alto: 210px; desbordamiento: oculto;) .slider (posición: relativa; ancho: 10000px; alto: 210px;) .slider img (flotador: izquierda; índice z: 0;)

El contenedor.slider-box establece las dimensiones del control deslizante. La propiedad overflow: hidden oculta todos los elementos que no caen dentro del área dentro del elemento.

El contenedor deslizante se establece en un ancho grande. Esto es necesario para que encajen todas las diapositivas.

Las diapositivas se alinean usando la propiedad float: left.

A continuación se muestra un diseño esquemático de los bloques deslizantes.

Texto

El movimiento de las diapositivas se realizará cambiando suavemente la propiedad de margen izquierdo del control deslizante del contenedor.

$ (función () (var ancho = $ (". cuadro deslizante") .width (); // Ancho del control deslizante. intervalo = 4000; // Intervalo de cambio de diapositivas.$ (". slider img: last") .clone () .prependTo (".slider"); // Se coloca una copia de la última diapositiva al principio.$ () .eq (1) .clone () .appendTo (".slider"); // Se coloca una copia de la primera diapositiva al final. // El container.slider se desplaza hacia la izquierda un ancho de diapositiva. setInterval ("animación ()", intervalo); // La función animation () se ejecuta para cambiar las diapositivas.)); función animation () (var margin = parseInt ($ (". slider") .css ("marginLeft")); // Desplazamiento actual del bloque. Control deslizante width = $ (". slider-box") .width (), // Ancho del control deslizante. slidersAmount = $ (". slider") .children () .length; // El número de diapositivas en el control deslizante. si (margen! = (- ancho * (slidersAmount- 1))) // Si la diapositiva actual no es la última,(margen = margen-ancho; // entonces el valor del margen se reduce por el ancho de la diapositiva.) demás ( // Si se muestra la última diapositiva,$ (". slider") .css ("margin-left", - ancho); // luego el bloque deslizante vuelve a su posición inicial, margen = - ancho * 2; ) $ (". slider") .animate ((marginLeft: margin), 1000); // El bloque deslizante se desplaza 1 diapositiva hacia la izquierda. } ;

El resultado es un control deslizante simple con desplazamiento automático infinito.

Para empezar, este artículo fue escrito con el objetivo de decirle cómo crear un control deslizante de desplazamiento de imágenes para páginas web. Este artículo no es de ningún modo educativo por naturaleza, solo sirve como ejemplo de cómo se puede implementar nuestro objeto de consideración. Puede usar el código provisto en este artículo como una especie de plantilla para tales desarrollos, espero poder transmitir toda la esencia de lo que he escrito al lector con suficiente detalle y de una manera accesible.

Y ahora, al grano, no hace mucho tiempo necesitaba poner un control deslizante en un sitio, pero después de buscar en Internet scripts prefabricados, no encontré nada que valiera la pena. algunos no funcionaron como necesitaba, mientras que otros no se iniciaron en absoluto sin errores en la consola. Usar jQuery - complementos me pareció demasiado poco interesante para el control deslizante, tk. Aunque resolveré el problema con esto, no comprenderé el funcionamiento de este mecanismo, y usar el complemento por el bien de un control deslizante no es muy óptimo. Tampoco quería entender los guiones torcidos, por eso decidí escribir mi propio guión para el control deslizante, que yo mismo marcaré según sea necesario.

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

Nuestro principal objeto será ventana gráfica, es decir, un bloque en el que veremos como van girando nuestras imágenes, en él tendremos envoltura de diapositivas, este será nuestro bloque que contendrá todas las imágenes, alineadas en una línea, y que cambiará su posición dentro del mismo ventana gráfica.


Además, en los lados del interior ventana gráfica, verticalmente en el medio, se ubicarán los botones de retroceso y avance, al hacer clic en el cual también cambiaremos la posición de nuestro envoltura de diapositivas relativamente ventana gráfica, lo que provoca el efecto de desplazarse por las imágenes. Y finalmente, el último objeto serán nuestros botones de navegación ubicados en la parte inferior. ventana gráfica.


Al hacer clic en ellos, simplemente miraremos el número de serie de este botón y pasaremos a la diapositiva que necesitamos, nuevamente desplazando envoltura de diapositivas(la compensación se realizará mediante el cambio transformar propiedades css, cuyo valor se calculará constantemente).

Creo que la lógica de todo este caso debería quedar clara después de lo que dije anteriormente, pero si todavía hay malentendidos en alguna parte, entonces todo se aclarará en el código a continuación, solo necesita un poco de paciencia.

¡Ahora escribamos! En primer lugar, abriremos nuestro archivo de índice y escriba el marcado que necesitamos allí:

• 
• 
• 
• 

Como ves nada complicado bloque-para-deslizador sirve como el mismo bloque en el que se colocará nuestro control deslizante, dentro de él mismo ventana gráfica en el que nuestro envoltura de diapositivas, también conocida como lista anidada, aquí li son diapositivas y img- imágenes en su interior. Preste atención al hecho de que todas las imágenes deben ser del mismo tamaño o, al menos, proporciones; de lo contrario, el control deslizante se verá torcido, tk. sus dimensiones dependen directamente de la relación de aspecto de la imagen.

Ahora tenemos que estilizar todo, generalmente los estilos no se comentan realmente, pero decidí llamar la atención sobre esto, para que no haya malentendidos en el futuro.

body (margin: 0; padding: 0;) # block-for-slider (ancho: 800px; margin: 0 auto; margin-top: 100px;) #viewport (width: 100%; display: table; position: relativas; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;) #slidewrapper ( posición: relativa; ancho: calc (100% * 4); arriba: 0; izquierda: 0; margen: 0; relleno: 0; -webkit-transición: 1s; -o-transición: 1s; transición: 1s; -webkit -función-temporización-transición: entrada-salida-fácil; -función-temporización-o-transición: entrada-salida-fácil; función-temporización-transición: entrada-salida-fácil;) #slidewrapper ul, #slidewrapper li (margin : 0; padding: 0;) #slidewrapper li (width: calc (100% / 4); list-style: none; display: inline; float: left;) .slide-img (ancho: 100%;)

Empecemos con bloque-para-deslizador, este, nuevamente, es nuestro bloque en la página, el cual dejaremos a un lado para el slider, su altura dependerá de su ancho y de las proporciones de nuestra imagen, ya que ventana gráfica ocupa todo el ancho bloque-para-deslizador entonces yo mismo diapositiva tiene el mismo ancho y, en consecuencia, la imagen en su interior cambia su altura dependiendo del ancho (las proporciones se conservan). Coloqué este elemento horizontalmente en el medio de mi página, rellenando 100px desde la parte superior, haciendo que su posición sea más conveniente para un ejemplo.

Elemento ventana gráfica, como ya se mencionó, ocupa todo el ancho de nuestro bloque-para-deslizador, tiene la propiedad desbordamiento: oculto, nos permitirá ocultar nuestro feed de imágenes, que saldrá de la ventana gráfica.


Siguiente propiedad css - selección de usuario: ninguna, le permite deshacerse de la selección azul de elementos deslizantes individuales con varios clics en los botones.

Moviéndose a envoltura de diapositivas por qué posición: relativa, pero no absoluto? Todo es muy simple, tk. si elegimos la segunda opción, entonces con la propiedad Desbordamiento de la ventana gráfica: oculto absolutamente nada nos parecerá, tk. yo mismo ventana gráfica no se ajustará a la altura envoltura de diapositivas, por lo que tendré altura: 0... ¿Por qué es tan importante el ancho y por qué lo configuramos? El caso es que nuestras diapositivas tendrán un ancho igual a 100% de la ventana gráfica, y para organizarlos en una línea, necesitamos un lugar donde se colocarán, por lo tanto, el ancho envoltura de diapositivas debería ser igual Ancho de la ventana gráfica del 100% multiplicado por el número de diapositivas (en mi caso, 4). Sobre transición y función de tiempo de transición entonces aqui 1 s significa que un cambio de posición envoltura de diapositivas ocurrirá dentro de 1 segundo y lo observaremos, y facilidad de entrada-salida- el tipo de animación en la que primero va lentamente, acelera hacia la mitad y luego vuelve a ralentizarse, aquí ya puede establecer los valores a su discreción.

El siguiente bloque de conjuntos de propiedades envoltura de diapositivas y sus hijos tienen relleno de ceros, los comentarios son innecesarios aquí.

A continuación, aplicaremos estilo a nuestras diapositivas, su ancho debe ser igual al ancho. ventana gráfica, pero desde ellos están en envoltura de diapositivas, cuyo ancho es igual al ancho de la ventana gráfica multiplicado por el número de diapositivas, luego para obtener el ancho ventana gráfica de nuevo, necesitamos el 100% del ancho envoltura de diapositivas dividir por el número de diapositivas (en mi caso, nuevamente, por 4). Luego los convertimos en elementos en línea usando pantalla: en línea y establezca el flujo a la izquierda agregando la propiedad flotador izquierdo... Sobre estilo de lista: ninguno Puedo decir que lo uso para eliminar el marcador predeterminado de li, en la mayoría de los casos es una especie de estándar.

Con slide-img todo es simple, la imagen ocupará todo el ancho diapositiva, diapositiva se ajusta a su altura, envoltura de diapositivas se ajusta a la altura diapositiva y la altura ventana gráfica a su vez tomará el valor de la altura envoltura de diapositivas, por lo tanto, la altura de nuestro control deslizante dependerá de la relación de aspecto de la imagen y el tamaño del bloque proporcionado para el control deslizante, sobre el que ya escribí anteriormente.

Creo que aquí es donde descubrimos los estilos, hagamos una presentación de diapositivas simple sin botones por ahora, y después de asegurarnos de que funciona correctamente, agreguemos y diseñemos.

Abramos nuestro archivo js, que contendrá el código del control deslizante, no olvide incluir jQuery ya que escribiremos usando este marco. Por cierto, en el momento de escribir este artículo, estoy usando la versión jQuery 3.1.0... El archivo con el propio script debe incluirse al final de la etiqueta. cuerpo ya que trabajaremos con los elementos DOM que deben inicializarse primero.

Por ahora, necesitamos declarar un par de variables, una almacenará el número de diapositiva que vemos en un momento determinado en ventana gráfica, La nombré slideNow, y el segundo almacenará el número de estas mismas diapositivas, esto es slideCount.

var slideNow = 1; var slideCount = $ ("# slidewrapper"). hijos (). longitud);

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

V slideCount pondremos el numero de niños envoltura de diapositivas, todo es lógico aquí.
A continuación, debe crear una función que se encargará de cambiar las diapositivas de derecha a izquierda, la declararemos:

función nextSlide () ()

Lo llamaremos en el bloque principal de nuestro código, al que llegaremos, pero por ahora le diremos a nuestra función qué debe hacer:

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 (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0 ) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow ++;))

Primero, verificamos si ahora estamos en la última diapositiva de nuestro feed. Para hacer esto, tomamos el número de todas nuestras diapositivas usando $ ("# slidewrapper"). children (). length y verifíquelo con el número de nuestra diapositiva, si resultan ser iguales, entonces esto significa que debemos comenzar a mostrar la cinta nuevamente, desde 1 diapositiva, lo que significa que cambiamos propiedad de transformación css a envoltura de diapositivas sobre traducir (0, 0), desplazándola así a su posición original para que aparezca la primera diapositiva en nuestro campo de visión, no te olvides también de –Kit web y –ms para una visualización adecuada en varios navegadores (consulte. referencia de propiedades CSS). Después de eso, no olvidemos actualizar el valor de la variable. slideNow, informándole que la diapositiva número 1 está en su campo de visión: slideNow = 1;

La misma condición incluye comprobar que el número de la diapositiva que vemos está dentro de los límites del número de nuestras diapositivas, si de alguna manera esto no se cumple, entonces volveremos a la 1ª diapositiva.

Si no se cumple la primera condición, entonces esto significa que en este momento no estamos en la última diapositiva, o en alguna inexistente, lo que significa que debemos cambiar a la siguiente, lo haremos cambiando envoltura de diapositivas a la izquierda por un valor igual al ancho ventana gráfica, el desplazamiento ocurrirá nuevamente a través de la propiedad familiar traducir cuyo valor será igual a "translate (" + translateWidth + "px, 0)", dónde translateWidth- la distancia por la cual nuestro envoltura de diapositivas... Por cierto, declaremos esta variable al principio de nuestro código:

var translateWidth = 0;

Después de pasar a la siguiente diapositiva, dígale a nuestra slideNow que vemos la siguiente diapositiva: slideNow ++;

Por el momento, algunos lectores pueden tener una pregunta: ¿por qué no reemplazamos $ ("# viewport"). width () a alguna variable, por ejemplo slideWidth para tener siempre a mano el ancho de nuestro tobogán? La respuesta es muy simple, si nuestro sitio responde, entonces, en consecuencia, el bloque asignado para el control deslizante también es adaptativo, de esto se puede entender que al cambiar el tamaño del ancho de la ventana sin recargar la página (por ejemplo, girar el teléfono de lado), el ancho ventana gráfica cambiará y, en consecuencia, también cambiará el ancho de una diapositiva. En este caso, nuestro envoltura de diapositivas se desplazará por el valor del ancho original, lo que significa que las imágenes se mostrarán en partes o no se mostrarán en absoluto en ventana gráfica... Escribiendo a nuestra función $ ("# viewport"). width () en lugar de slideWidth hacemos que calcule el ancho cada vez que cambiamos de diapositiva ventana gráfica, proporcionando así un desplazamiento a la diapositiva deseada cuando el ancho de la pantalla cambia abruptamente.

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

var slideInterval = 2000;

El tiempo en js se especifica en milisegundos.

Ahora escribamos la siguiente construcción:

$ (documento) .ready (function () (setInterval (nextSlide, slideInterval);));

Todo es más fácil en ninguna parte, estamos a través de la construcción. $ (documento) .ready (función () ()) Decimos que las siguientes acciones deben realizarse después de que el documento esté completamente cargado. Entonces simplemente llamamos a la función la siguiente diapositiva con un intervalo igual a slideInterval, usando la función incorporada setInterval.

Después de todas las acciones que realizamos anteriormente, nuestro control deslizante debería girar bien, pero si algo salió mal contigo, entonces el problema puede estar en la versión jQuery, o en la conexión incorrecta de cualquier archivo. Además, no es necesario excluir que podría haber cometido un error en alguna parte del código, por lo que solo puedo aconsejarle que vuelva a verificar todo.


Mientras tanto, continúe, agregue a nuestro control deslizante una función como dejar de desplazarse al desplazarse, para esto necesitamos escribir en el bloque principal de código (dentro de $ (documento) .ready (function () ())) tal cosa:

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

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

$ (documento) .ready (function () (var switchInterval = setInterval (nextSlide, slideInterval); $ ("# viewport"). hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval ( nextSlide, slideInterval);));));

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

Después de pasar el mouse, borro el espacio, que indicaré entre paréntesis (este es nuestro switchInterval), luego, separados por comas, escribo lo que haré cuando mueva el cursor hacia atrás, en este bloque vuelvo a asignar a nuestro switchInterval llamada de función periódica la siguiente diapositiva.

Ahora, si lo comprobamos, veremos cómo reacciona nuestro control deslizante al pasar el mouse, deteniendo el cambio de diapositiva.

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

Primero que nada, vamos a marcarlos:

• 
• 
• 
• 

Al principio, este marcado puede ser incomprensible, diré de inmediato que envolví estos dos botones en uno div con clase prev-next-btns solo para tu conveniencia, no tienes que hacer esto, el resultado no cambiará, ahora les agregaremos estilos y todo quedará claro:

# prev-btn, # next-btn (posición: absoluta; ancho: 50px; alto: 50px; color de fondo: #fff; radio del borde: 50%; parte superior: calc (50% - 25px);) # anterior btn: hover, # next-btn: hover (cursor: pointer;) # prev-btn (left: 20px;) # next-btn (right: 20px;)

Primero, colocamos nuestros botones a través de posición: absoluta, de ese modo controlaremos libremente su posición dentro de nuestra ventana gráfica, luego indicaremos los tamaños de estos botones y usando radio de borde redondee las esquinas para que estos botones se conviertan en círculos. Su color será el blanco, es decir #fff, y su sangría desde el borde superior ventana gráfica será igual a la mitad de la altura de este ventana gráfica menos la mitad de la altura del botón en sí (en mi caso 25px) para que podamos colocarlos verticalmente en el centro. A continuación, indicaremos que cuando pasemos el cursor sobre ellos, nuestro cursor cambiará a puntero y finalmente decirle a nuestros botones individualmente que sangran 20px desde sus bordes para que podamos verlos como mejor nos parezca.

Nuevamente, puede diseñar los elementos de la página como desee, solo estoy dando un ejemplo de los estilos que decidí usar.

Después de diseñar, nuestro control deslizante debería verse así:


A continuación, regrese a nuestro archivo js donde describimos cómo funcionan nuestros botones. Bueno, agreguemos otra función, nos mostrará la diapositiva anterior:

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

Se llama prevSlide, se llamará solo cuando haga clic en prev-btn... Primero, verificamos si estamos en la 1ra diapositiva o no, aquí también verificamos si nuestro slideNow más allá de los límites del rango real de nuestras diapositivas y, si alguna de las condiciones funciona, pasaremos a la última diapositiva cambiando envoltura de diapositivas al valor que necesitamos. Calcularemos este valor por la fórmula: (ancho de una diapositiva) * (número de diapositivas - 1), tomamos todo esto con un signo menos, ya que lo desplazamos hacia la izquierda, resulta que ventana gráfica ahora nos mostrará la última diapositiva. Al final de este bloque, también necesitamos decirle a la variable slideNow que la última diapositiva está ahora en nuestro campo de visión.

Si no estamos en la primera diapositiva, entonces necesitamos mover 1 hacia atrás, para esto volvemos a cambiar la propiedad transformar para envoltura de diapositivas... La fórmula es la siguiente: (ancho de una diapositiva) * (número de la diapositiva actual - 2), nuevamente, tomamos todo esto con un signo menos. Pero, ¿por qué es -2 y no -1, necesitamos mover solo 1 diapositiva hacia atrás? El hecho es que si estamos, digamos, en la segunda diapositiva, entonces la variable X propiedades transformar: traducir (x, 0) nuestro envoltura de diapositivas ya es igual al ancho de una diapositiva, si le decimos que tenemos que restar 1 del número de la diapositiva actual, obtendremos nuevamente la unidad por la que ya está desplazada envoltura de diapositivas, por lo que deberá cambiar estos mismos anchos en 0 ventana gráfica, lo que significa en slideNow - 2.

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

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

Aquí solo hacemos un seguimiento de si se hizo un clic en nuestros botones, y en este caso llamamos a las funciones que necesitamos, todo es simple y lógico.

Ahora agreguemos los botones de navegación de diapositivas, de vuelta al marcado:

• 
• 
• 
• 

Como puedes ver, por dentro ventana gráfica apareció una lista anidada, dale un identificador nav-btns, dentro de eso li- nuestros botones de navegación, les asignaremos una clase slide-nav-btn, sin embargo, podemos terminar con el marcado, vayamos a los estilos:

# nav-btns (posición: absoluta; ancho: 100%; parte inferior: 20px; relleno: 0; margen: 0; alineación de texto: centro;) .slide-nav-btn (posición: relativa; pantalla: bloque en línea; estilo de lista: ninguno; ancho: 20px; alto: 20px; color de fondo: #fff; radio del borde: 50%; margen: 3px;) .slide-nav-btn: hover (cursor: pointer;)

Blok nav-btns, en el que se encuentran nuestros botones, le damos la propiedad posición: absoluta, para que no se estire ventana gráfica en altura, porque a envoltura de diapositivas propiedad posición: relativa, establecemos el ancho al 100% para que al usar alineación de texto: centro botones centrales horizontalmente relativos ventana gráfica, luego usando la propiedad fondo dejamos claro a nuestro bloque que debe estar a una distancia de 20px del borde inferior.

Hacemos lo mismo con los botones que con las diapositivas, pero ahora los configuramos pantalla: bloque en línea ya que a pantalla: en línea ellos no reaccionan a ancho y altura ya que están en un bloque absolutamente posicionado. Los haremos blancos y con la ayuda de los que ya nos son familiares. radio de borde démosles forma de círculo. Cuando pase el cursor sobre ellos, cambiaremos la apariencia de nuestro cursor por la pantalla habitual.

Ahora vayamos a jQuery - piezas:
Primero, declaremos la variable navBtnId, que almacenará el índice del botón en el que hicimos clic:

var navBtnId = 0;
$ (". slide-nav-btn"). click (function () (navBtnId = $ (this) .index (); if (navBtnId + 1! = slideNow) (translateWidth = - $ ("# viewport"). width () * (navBtnId); $ ("# slidewrapper"). css (("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)",)); slideNow = navBtnId + 1;)));

Aquí estamos al hacer clic en nuestro slide-nav-btn llamamos a la función, que en primer lugar se asigna a la variable navBtnId el índice del botón en el que se hizo clic, es decir, su número ordinal, ya que el conteo comienza desde cero, luego si hacemos clic en el segundo botón, entonces en navBtnId el valor se escribe 1. Luego, hacemos una verificación, donde agregamos uno al número ordinal del botón para obtener un número tal como si la cuenta regresiva no fuera de 0, sino de 1, comparamos este número con el número de la diapositiva actual, si coinciden, entonces no realizaremos ninguna acción, porque la diapositiva deseada ya está en ventana gráfica.

Si el tobogán que necesitamos está fuera de vista ventana gráfica, luego calculamos la distancia en la que debemos desplazarnos envoltura de diapositivas a la izquierda, luego cambie el valor css transform propiedades en translate(la misma distancia en píxeles, 0). Ya lo hemos hecho más de una vez, por lo que no debería haber preguntas. Al final, volvemos a guardar el valor de la diapositiva actual en una variable. slideNow, este valor se puede calcular agregando uno al índice del botón en el que se hizo clic.

Eso es todo, de hecho, si algo no está claro, entonces dejo un enlace al jsfiddle, donde se proporcionará todo el código escrito en el material.

¡Gracias por la atención!

Etiquetas: Agregar etiquetas