En este artículo, veremos con qué facilidad se puede crear un control deslizante adaptativo para un sitio web utilizando CSS Flexbox y transformaciones CSS.

Códigos fuente del control deslizante y demostración

Un proyecto de control deslizante llamado chiefSlider se encuentra en GitHub. Puedes acceder a él mediante este enlace.

Control deslizante con una diapositiva activa (sin bucle):

Control deslizante con tres diapositivas activas (sin bucle):

Un ejemplo que muestra cómo se puede utilizar un control deslizante para rotar artículos:

Ventajas de chiefSlider

Enumeremos las principales ventajas de este control deslizante:

• en primer lugar, no crea clones de elementos para organizar los bucles, como se implementa, por ejemplo, en OwlCarousel y en los complementos slick;
• en segundo lugar, no depende de la biblioteca jQuery; esto no sólo elimina requisitos adicionales, sino que también lo hace más fácil;
• en tercer lugar, prácticamente no realiza cambios en el DOM del documento; lo único que hace es agregar o cambiar valores de transformación CSS para elementos deslizantes;
• en cuarto lugar, contiene sólo un conjunto mínimo de funciones; se pueden agregar funciones adicionales según la tarea;
• en quinto lugar, es adaptativo, es decir se puede utilizar en cualquier sitio web; La adaptabilidad del control deslizante se configura mediante CSS;
• sexto, el número de elementos activos se ajusta mediante CSS; esto significa que se puede utilizar para crear un carrusel con una diapositiva activa o cualquier número de ellas.

Instalación del chiefSlider

La instalación del control deslizante requiere 3 pasos:

• agregue el CSS chiefSlider a la página o a un archivo CSS conectado a la página;
• coloque el código HTML del control deslizante en el lugar requerido de la página;
• inserte código JavaScript en la página o en un archivo js conectado a la página.

Es recomendable minimizar el código CSS y JavaScript; esta acción asegurará una carga más rápida de la página.

Cómo desarrollar un control deslizante simple para un sitio web (sin bucles)

La creación del chiefSlider consistirá en crear código HTML, CSS y JavaScript (sin jQuery).

Código HTML para el control deslizante chiefSlider:

Como puede ver, el control deslizante tiene una arquitectura HTML muy simple. Comienza con el bloque principal, que tiene una clase deslizante. Este bloque consta de 3 elementos.

El primer elemento es .slider__wrapper. Actúa como un contenedor para elementos .slider__item (diapositivas).

Los dos elementos restantes (.slider__control) representan visualmente botones. Se utilizarán para navegar por la diapositiva, es decir. pasar a los elementos anteriores y siguientes.

Código CSS para el control deslizante chiefSlider:

/* ESTILOS PRINCIPALES */ .slider ( posición: relativa; desbordamiento: oculto; ) .slider__wrapper ( display: flex; transición: transformación 0.6s facilidad; /* 0.6 duración del cambio de diapositiva en segundos */ ) .slider__item ( flex: 0 0 50%; /* define el número de diapositivas activas (en este caso 2 */ max-width: 50%; /* define el número de diapositivas activas (en este caso 2 */ ) /* ESTILOS PARA LOS BOTONES ATRÁS Y ADELANTE * / .slider__control ( posición: absoluta; mostrar: ninguno; arriba: 50%; transformar: traducirY(-50%); align-items: center; justify-content: center; text-align: center; ancho: 40px; /* ancho del botón */ alto: 50px; /* alto del botón */ opacidad: .5; /* transparencia */ fondo: #000; /* color de fondo */ ) .slider__control_show ( display: flex; ) .slider__control:hover, . slider__control:focus (decoración de texto: ninguno; contorno: 0; opacidad: .9; /* transparencia */ ) .slider__control_left ( izquierda: 0; ) .slider__control_right ( derecha: 0; ) .slider__control::before ( contenido: " "; pantalla: bloque en línea; ancho: 20px; /* ancho del icono (flecha) */ altura: 20px; /* altura del icono (flecha) */ fondo: centro transparente sin repetición centro; tamaño de fondo: 100% 100%; ) .slider__control_left::before ( imagen de fondo: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="%23fff " viewBox="0 0 8 8"%3E%3Cpath d="M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( imagen de fondo: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox="0 0 8 8"%3E%3Cpath d="M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); )

Como puede ver, el código CSS para el control deslizante tampoco es muy complicado. Las definiciones principales con las que puede personalizar la apariencia del control deslizante se proporcionan con comentarios.

Código CSS que determina el número de elementos activos:

/* define el número de diapositivas activas (en este caso 2) */ flex: 0 0 50%; ancho máximo: 50%;

Este código establece el número de elementos activos para el control deslizante en 2.

Para que un control deslizante, por ejemplo, tenga un elemento activo, estas definiciones deben cambiarse a lo siguiente:

/* define el número de diapositivas activas (en este caso 1) */ flex: 0 0 100%; ancho máximo: 100%;

La creación de un control deslizante adaptativo se realiza mediante consultas de medios.

Por ejemplo, un control deslizante, que en dispositivos con una pantalla pequeña debería tener un control deslizante activo y en los grandes, cuatro:

Slider__item (flex: 0 0 100%; ancho máximo: 100%; ) @media (ancho mínimo: 980px) ( .slider__item (flex: 0 0 25%; ancho máximo: 25%; ) )

Código JavaScript para el control deslizante chiefSlider:

"uso estricto"; var multiItemSlider = (función () ( función de retorno (selector) ( var _mainElement = document.querySelector(selector), // elemento del bloque principal _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // contenedor para.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // elementos (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // controles _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // botón "IZQUIERDA" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // botón "DERECHA" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // ancho del contenedor _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / ancho de un elemento _positionLeftItem = 0, // posición del elemento activo izquierdo _transform = 0, // valor de transformación.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // tamaño del paso (para transformación) _items = ; // matriz de elementos // llenando la matriz _items _sliderItems.forEach(function (item, index) ( _items.push(( item: item, position: index, transform: 0 )); )); var posición = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = función (dirección) ( if (dirección === "derecha") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= posición .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= position.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; ) if (dirección === "izquierda") ( if (_positionLeftItem position.getMax() ) ( nextItem = position.getItemMin(); _items.position = position.getMax() + 1; _items.transform += _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; ) _transform -= _step; ) if (dirección === "izquierda") ( _positionLeftItem--; if (_positionLeftItem< position.getMin()) { nextItem = position.getItemMax(); _items.position = position.getMin() - 1; _items.transform -= _items.length * 100; _items.item.style.transform = "translateX(" + _items.transform + "%)"; } _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; }

De hecho, aquí todo es sencillo.

Por ejemplo, para pasar a la siguiente diapositiva, primero se busca en la matriz de elementos un elemento con una posición mayor que la del elemento actual más a la derecha.slider__item.

Si existe tal elemento en la matriz, entonces se realiza la transformación element.slider__wrapper (es decir, acciones, como en el algoritmo sin bucle).

Pero si no existe tal elemento, además de transform.slider__wrapper, se realizan otras acciones. Primero, se busca en la matriz de elementos el elemento con la posición mínima. Después de recibir este elemento, se establece su posición, cuyo valor será igual al valor del elemento derecho actual + 1. Y por supuesto, su transformación se realiza en tal porcentaje que acaba al final, es decir. después del último elemento.

Para pasar a la diapositiva anterior se realizan acciones similares, pero a la inversa.

Además, para un control deslizante en bucle, no es necesario alternar la visibilidad de los botones Izquierda y Derecha. Estos botones en esta versión del control deslizante siempre se mostrarán.

Para hacer esto necesitas:

• elimine la clase slider__control_show del control "Derecho";
• en el CSS para selector.slider__control cambie el valor de la propiedad de visualización a flex .

Demostración del control deslizante ¿Cómo crear un control deslizante con bucle y cambio automático de diapositiva?

Puede programar cambios automáticos de diapositivas en ciertos intervalos usando la función setInterval.

Var _ciclo = función (dirección) ( if (!_config.isCycling) ( retorno; ) _interval = setInterval(función () ( _transformItem(dirección); ), _config.interval); )

La función setInterval en este ejemplo ejecutará la función _transformItem a intervalos especificados iguales al valor de la variable _config.interval.

Además, es recomendable añadir una parada al cambio automático de diapositivas cuando mueves el cursor al control deslizante.

Puede implementar esta funcionalidad de la siguiente manera:

If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", función () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", función () ( clearInterval(_interval); _cycle( _config.dirección); )); )

¿Cómo detener el cambio automático de diapositivas si el elemento no es visible para el usuario?

Es recomendable desactivar el cambio automático de diapositivas en dos casos:

• cuando la página (en la que se encuentra este control deslizante) está inactiva;
• cuando el control deslizante está fuera del área de visibilidad de la página.

El primer caso se puede manejar utilizando el evento de cambio de visibilidad.

Document.addEventListener("cambio de visibilidad", _handleVisibilityChange, falso);

Función para el controlador de eventos de cambio de visibilidad:

// manejando el evento "Cambios de visibilidad del documento" var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ) )

El cálculo de la visibilidad de un elemento se puede realizar utilizando la función _isElementVisible:

Función _isElementVisible(elemento) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = función (x, y) ( devolver document.elementFromPoint(x, y); ); si (rect.right< 0 || rect.bottom < 0 || rect.left >vAncho || rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || elemento.contains(elemFromPoint(rect.left, rect.bottom))); )

Puede colocar la llamada _isElementVisible, por ejemplo, al comienzo de la función _transformItem. Esta acción cancelará la transición automática de diapositivas si el control deslizante se encuentra actualmente fuera de la ventana gráfica.

Var _transformItem = función (dirección) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...

Control deslizante que responde al cambio de tamaño de la ventana del navegador

Esta versión del control deslizante adaptativo se diferencia de las anteriores en que le permite cambiar la cantidad de elementos activos (diapositivas) al cambiar el tamaño de la ventana del navegador. Los usuarios normalmente no cambian el tamaño de su navegador, pero aún así puede suceder.

Esto se implementa utilizando el evento de cambio de tamaño y la matriz _states. La matriz se utiliza para los cálculos. Su uso le permitirá evitar reiniciar el control deslizante cuando no sea necesario.

Actualmente, un control deslizante (carrusel) es una funcionalidad que simplemente es necesaria en un sitio web comercial, en un sitio web de cartera o en cualquier otro recurso. Junto con los controles deslizantes de imágenes de pantalla completa, los controles deslizantes de carrusel horizontales encajan bien en cualquier diseño web.

A veces, el control deslizante debería ocupar un tercio de la página del sitio. Aquí el control deslizante del carrusel se utiliza con efectos de transición y diseños responsivos. Los sitios de comercio electrónico utilizan un control deslizante de carrusel para mostrar varias fotos en publicaciones o páginas individuales. El código deslizante se puede utilizar y modificar libremente según sus necesidades.

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

Slick: complemento deslizante de carrusel moderno

Slick es un complemento jquery disponible gratuitamente cuyos desarrolladores afirman que su solución satisfará todos los requisitos de su control deslizante. Control deslizante adaptable: el carrusel puede funcionar en modo "mosaico" para dispositivos móviles y en modo "arrastrar y soltar" para la versión de escritorio.

Contiene un efecto de transición de "desvanecimiento", una característica interesante de "modo central", carga diferida de imágenes con desplazamiento automático. La funcionalidad actualizada incluye agregar diapositivas y un filtro de diapositivas. Todo para garantizar que configure el complemento de acuerdo con sus requisitos.

Modo de demostración | Descargar

Owl Carousel 2.0 – jQuery – complemento para usar en dispositivos táctiles

Este complemento tiene un gran conjunto de funciones, adecuado tanto para principiantes como para desarrolladores experimentados. Esta es una versión actualizada del control deslizante del carrusel. Su predecesor tenía el mismo nombre.

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

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

Ejemplos | Descargar

Complemento jQuery Silver Track

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

Ejemplos | Descargar

AnoSlide: control deslizante jQuery responsivo ultracompacto

Control deslizante jQuery ultracompacto: carrusel, cuya funcionalidad es mucho mayor que la de un control deslizante normal. Estos incluyen vista previa de una sola imagen, visualización en carrusel de múltiples imágenes y visualización de control deslizante basada en títulos.

Ejemplos | Descargar

Carrusel de búhos – control deslizante Jquery – carrusel

Owl carrusel es un control deslizante que admite pantallas táctiles y tecnología de arrastrar y soltar, y se integra fácilmente en el código HTML. El complemento es uno de los mejores controles deslizantes que le permite crear hermosos carruseles sin ningún marcado especialmente preparado.

Ejemplos | Descargar

Galería 3D - carrusel

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

Ejemplos | Descargar

Carrusel 3D usando TweenMax.js y jQuery

Magnífico carrusel 3D. Parece que todavía es una versión beta, porque acabo de descubrir un par de problemas. Si estás interesado en probar y crear tus propios controles deslizantes, este carrusel te será de gran ayuda.

Ejemplos | Descargar

Carrusel usando bootstrap

Control deslizante responsivo: carrusel que utiliza tecnología bootstrap solo para su nuevo sitio web.

Ejemplos | Descargar

Control deslizante del carrusel de Moving Box basado en el marco Bootstrap

Más popular en sitios web de carteras y negocios. Este tipo de control deslizante (carrusel) se encuentra a menudo en sitios de cualquier tipo.

Ejemplos | Descargar

Control deslizante de círculo pequeño

Este control deslizante de tamaño pequeño está listo para funcionar en dispositivos con cualquier resolución de pantalla. El control deslizante puede funcionar tanto en modo circular como en carrusel. Tiny Circle se presenta como una alternativa a otros controles deslizantes de este tipo. Hay soporte integrado para los sistemas operativos IOS y Android.

En modo circular, el control deslizante parece bastante interesante. Excelente soporte para el método de arrastrar y soltar y un sistema de desplazamiento automático de diapositivas.

Ejemplos | Descargar

Control deslizante de contenido de Pulgarcita

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

Ejemplos | Descargar

Vaya – control deslizante – carrusel

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

Ejemplos | Descargar

Control deslizante de contenido jQuery responsivo bxSlider

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

Ejemplos | Descargar

jCarrusel

jCarousel es un complemento de jQuery que te ayudará a organizar la visualización de tus imágenes. Puede crear fácilmente carruseles de imágenes personalizados a partir de la base que se muestra en el ejemplo. El control deslizante es adaptable y está optimizado para trabajar en plataformas móviles.

Ejemplos | Descargar

Cuadro de desplazamiento - complemento jQuery

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

Ejemplos | Descargar

dbpasCarrusel

Un simple control deslizante de carrusel. Si necesita un complemento rápido, este es 100% adecuado. Viene con sólo las funciones básicas necesarias para que funcione el control deslizante.

Ejemplos | Descargar

Flexisel: complemento deslizante JQuery responsivo - Carrusel

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

El diseño responsivo de Flexisel, cuando se ejecuta en dispositivos móviles, es diferente del diseño del tamaño de una ventana de navegador. Flexisel está perfectamente adaptado para trabajar en pantallas, tanto de baja como de alta resolución.

Ejemplos | Descargar

Elastislide – control deslizante adaptativo – carrusel

Elastislide se adapta perfectamente al tamaño de la pantalla de tu dispositivo. Puede establecer la cantidad mínima de imágenes para mostrar en una resolución específica. Funciona bien como un control deslizante de carrusel con galerías de imágenes, utilizando un contenedor fijo junto con un efecto de desplazamiento vertical.

Ejemplo | Descargar

Control deslizante flexible 2

Control deslizante gratuito de Woothemes. Se considera, con razón, uno de los mejores controles deslizantes adaptativos. El complemento contiene varias plantillas y será útil tanto para usuarios novatos como para expertos.

Ejemplo | Descargar

Carrusel increíble

Amazing Carousel: control deslizante de imágenes responsivo usando jQuery. Admite muchos sistemas de gestión de contenidos como WordPress, Drupal y Joomla. También es compatible con Android, IOS y sistemas operativos de escritorio sin ningún problema de compatibilidad. Las sorprendentes plantillas de carrusel incorporadas le permiten usar el control deslizante en modos vertical, horizontal y circular.

Ejemplos | Descargar

Corrección del 18 de enero de 2013:
Se corrigió un error con el desplazamiento automático al cambiar de pestaña o minimizar la ventana del navegador. Se eliminó la verificación de la presencia del atributo de nombre en los enlaces hacia adelante y hacia atrás.
El archivo fuente ha sido actualizado.
Corrección del 19 de junio de 2013:
Se agregó la capacidad de usar varios controles deslizantes en una página, sin soporte de desplazamiento automático todavía, por lo que el archivo fuente y la página de demostración no se actualizaron.
Se corrigió un error por el cual aparecían imágenes debajo de las flechas.
Respondí cómo iniciar el desplazamiento automático sin presionar el botón de reproducción.

Los controles deslizantes (rotadores de contenido [imagen, texto, video]) están presentes en todos los proyectos. De hecho, hay muchos proyectos en Internet donde puedes descargar y seleccionar casi cualquier complemento de control deslizante a tu gusto. Sin embargo, hay situaciones en las que no es práctico conectar a un proyecto un control deslizante, cuya versión minimizada pesa 10 KB o más.

Digamos que necesita crear un control deslizante que contenga entre 15 y 20 imágenes con títulos o un par de videos. Es para estos casos que le será útil esta lección, donde aprenderá cómo hacer un control deslizante con desplazamiento horizontal, y un script no optimizado pesará menos de 2 KB. Al hacer clic en el botón "Demostración" a continuación, podrá ver una demostración de la lección y, al hacer clic en el botón "Fuente", recibirá un archivo de la lección (con comentarios), por cierto, para aprender a hacer un simple control deslizante en miniaturas, lea.

Para entender la esencia, diré que al final de la lección obtendremos un control deslizante con las siguientes funciones:

• Cambiar diapositivas de izquierda a derecha
• Modo de funcionamiento automático deslizante, botones de inicio y pausa.
• Número ilimitado de diapositivas

Diseño deslizante

El marcado del control deslizante es muy simple, necesitamos:

• contenedor general (control deslizante),
• Tres contenedores para navegación (dos botones para la diapositiva anterior/siguiente (azul marino) y un botón (automático) para los botones de inicio/pausa),
• contenedor para todas las diapositivas (lista de diapositivas),
• envoltorio de todas las diapositivas (slide-wrap).

...habrá diapositivas en el contenedor de elementos de diapositivas Primera diapositiva Estilos de controles deslizantes

Para aplicar estilo al control deslizante, agreguemos algunas reglas al archivo de estilos.

/* Establecer el reinicio del ajuste */ .clear ( margin-top: -1px; height: 1px; clear:both; zoom: 1; ) /* Control deslizante */ .slider ( /* Ancho del contenedor */ ancho: 900px; / * Relleno exterior en la parte superior e inferior */ margin: 50px auto; /* Relleno interior para enlaces azul marino */ padding: 0 30px; /* Posicionamiento */ posición: relativa; ) /* Al hacer doble clic en los botones adelante/atrás se selecciona todo elementos del control deslizante, por lo que evitamos esto */ .slider::-moz-selection ( fondo: transparente; color: #fff; texto-sombra: ninguno; ) .slider::selection ( fondo: transparente; color: #fff; texto -shadow: none; ) .slide-list ( posición: relativa; margen: 0; padding: 0; /* Ocultar lo que va más allá de los bordes */ overflow: oculto; ) .slide-wrap ( posición: relativa; izquierda: 0px ; top: 0; /* ancho máximo posible del contenedor del control deslizante */ ancho: 10000000px; ) .slide-item ( /* Ancho de diapositiva */ ancho: 280px; /* Relleno */ relleno: 10px; /* Envoltura */ float: izquierda; ) .slide-title ( /* Fuente */ fuente: negrita 16px monoespacio; /* Indica que el elemento es un elemento de bloque */ display: block; )

Y también estilos importantes para los botones de navegación hacia adelante/atrás e inicio/pausa.

/* navegación hacia adelante/atrás */ .navy ( /* posicionamiento absoluto */ posición: absoluta; arriba: 0; índice z: 1; altura: 100%; /* ancho del elemento */ ancho: 30px; cursor: puntero; ) .prev-slide ( izquierda: 0; fondo: #dbdbdb url(bg/left-arrow.png) 11px 40% sin repetición; ) .next-slide ( derecha: 0; fondo: #dbdbdb url(bg/right -arrow.png) 13px 40% sin repetición; ) .navy.disable ( fondo: #dbdbdb; ) /* inicio/pausa de navegación */ .auto ( ancho: 7px; alto: 11px; cursor: puntero; margen: 10px auto; ) .play ( fondo: url(bg/play.png) centro sin repetición; ) .pause ( fondo: url(bg/pause.png) centro sin repetición; )

Recuerde que el fondo de los botones se establece igual que el fondo general para superponer la visualización de las diapositivas. Ahora es el turno del script jQuery, que haremos.

Escribiendo un guión

No olvides que primero debes incluir la biblioteca jQuery. Y luego escribiremos un script deslizante y lo inicializaremos. Primero, aquí hay una lista de códigos completa y luego explicaré lo que está sucediendo aquí:

jQuery(document).ready(function())( function htmSlider())( /* Establezca los siguientes parámetros */ /* contenedor del control deslizante */ var slideWrap = jQuery(".slide-wrap"); /* adelante/atrás y botones de inicio /pausa */ var nextLink = jQuery(".next-slide"); var prevLink = jQuery(".prev-slide"); var playLink = jQuery(".auto"); /* Comprobar animación * / var is_animate = false; /* ancho de diapositiva con relleno */ var slideWidth = jQuery(".slide-item").outerWidth(); /* desplazamiento del control deslizante */ var scrollSlider = slideWrap.position().left - slideWidth; /* Haga clic en el enlace a la siguiente diapositiva */ nextLink.click(function())( if(!slideWrap.is(":animated")) ( slideWrap.animate((left: scrollSlider), 500, function()) ( slideWrap .find(" .slide-item:first") .appendTo(slideWrap) .parent() .css(("left": 0)); )); ) )); /* Haga clic en el enlace al diapositiva anterior */ prevLink.click( function())( if(!slideWrap.is(":animated")) ( slideWrap .css(("left": scrollSlider)) .find(".slide-item:last" ) .prependTo(slideWrap) .parent( ) .animate((izquierda: 0), 500); ) )); /* Función para desplazar automáticamente el control deslizante */ function autoplay())( if(!is_animate)( is_animate = true; slideWrap.animate((left: scrollSlider), 500, function())( slideWrap .find(".slide -item:first ") .appendTo(slideWrap) .parent() .css(("left": 0)); is_animate = false; )); ) ) /* Los clics en los enlaces comienzan/pausa */ playLink.click( function())( if(playLink.hasClass("play"))( /* Cambiar la clase del botón a la clase de pausa */ playLink.removeClass("play").addClass("pause"); /* Agregar una clase a los botones adelante/atrás que los oculta */ jQuery(".navy").addClass("disable"); /* Inicializa la función autoplay() a través de una variable para que luego puedas desactivarla */ timer = setInterval(autoplay, 1000); ) else ( playLink.removeClass( "pause").addClass("play"); /* muestra los botones de avance/retroceso */ jQuery(".navy").removeClass("disable") ; /* Deshabilitar la función de reproducción automática() */ clearInterval(timer); ) )); ) /* inicializa la función del control deslizante */ htmSlider(); ));

Explicaciones:

En primer lugar, creamos las variables necesarias para simplificar el trabajo con el código:

• envoltorio deslizante
• ancho de diapositiva
• desplazamiento de envoltura deslizante
• botones de navegacion

La segunda acción es una descripción de los clics en los botones de avance/retroceso.

Primero, simplemente animé el clic en el botón nextLink: usando la función animate(), animamos el contenedor del control deslizante moviéndose hacia la izquierda según el valor de scrollSlider. Después de que haya ocurrido este evento, mueva la primera diapositiva de la lista de diapositivas al final de la lista y establezca la posición izquierda del contenedor de la lista de diapositivas en 0. Pero resultó que si haces clic rápidamente en él 10 veces, se producirán 10 movimientos, y esto es un verdadero error.

El evento de animación del control deslizante cuando se hace clic en el botón de diapositiva anterior es ligeramente diferente:

Los primeros pasos son establecer la posición del contenedor de diapositivas en el control deslizante de desplazamiento izquierdo y mover la última diapositiva del contenedor al principio de la lista, pero observe que sin animación; El segundo paso es animar la posición del contenedor del control deslizante para que cambie a un valor de 0.

Es así de simple)

La función de desplazamiento automático del control deslizante es similar a la animación que ocurre cuando haces clic en el botón de siguiente diapositiva, nada especial, lo agregué para usar correctamente las funciones jQuery - setInterval y clearInterval - son realmente geniales)

Cuando hace clic en el botón deslizante automático, ocurren los siguientes eventos:

Si el botón tiene una clase de reproducción, cambie esta clase a pausa, oculte los botones de avance/retroceso [para que no interfieran con el funcionamiento del control deslizante] y comience el desplazamiento automático usando la variable del temporizador.

Si el botón tiene una clase de pausa, entonces cambiamos esta clase para iniciar, mostramos los botones de avance/retroceso y detenemos la variable del temporizador, que comienza a desplazarse automáticamente.

El último paso es inicializar la función deslizante htmSlider();

Dos o más controles deslizantes en una página

Desafortunadamente, todavía no ha sido posible implementar el desplazamiento automático de varios controles deslizantes en una página, pero todo lo demás funciona a la perfección. Entonces, queridos lectores, a petición suya, publico un script para varios controles deslizantes cíclicos:

JQuery(document).ready(function())( //// ---> Comprobando si existe un elemento en la página jQuery.fn.exists = function() ( return jQuery(this).length; ) /// / -- -> Control deslizante $(función())( if($(".slider").exists()) ( $(".slider").each(function())( var control deslizante = $(this) ; var slideWrap = slider .find(".slide-wrap"), nextLink = slider.find(".next-slide"), prevLink = slider.find(".prev-slide"), slideWidth = slider.find( ".slide-item ").outerWidth(), scrollSlider = slideWrap.position().left - slideWidth; /* Haga clic en el enlace a la siguiente diapositiva */ nextLink.click(function())( if(!slideWrap. is(":animated")) ( slideWrap.animate((izquierda: scrollSlider), 500, función())( slideWrap .find(".slide-item:first") .appendTo(slideWrap) .parent() .css (("left": 0)) ; )); ) )); /* Haga clic en el enlace a la diapositiva anterior */ prevLink.click(function())( if(!slideWrap.is(":animated") ) ( slideWrap .css(("izquierda": scrollSlider )) .find(".slide-item:last") .prependTo(slideWrap) .parent() .animate((izquierda: 0), 500); ) )); )); ) )); ));

El marcado del segundo control deslizante difiere del primero solo en que agregamos otra clase al contenedor.slider, lo que nos permitirá diseñar el segundo (tercero, enésimo) control deslizante según necesitemos:

...

Diseñemos algunos elementos del control deslizante de manera diferente (reduzcamos el ancho del control deslizante, deslicemos, establezcamos un color y una fuente diferentes para el título de la diapositiva):

Slider.slider2 ( ancho: 400px; ) .slider2 .slide-item ( ancho: 180px; ) .slider2 .slide-title ( fuente: negrita 12px Arial; color: #ed0000; ) .slider2 .navy ( padding-top: 30px ; ) .slider2 .slide-item img (pantalla: bloque; ancho: 100%;)

Conclusión

Hoy viste y aprendiste cómo crear un control deslizante animado básico con desplazamiento horizontal con tus propias manos sin usar complementos. Deja tus preguntas, deseos y agradecimientos en los comentarios, ¡todo lo mejor!

Este es un control deslizante táctil receptivo escrito en jQuery. El motor de este complemento utiliza animaciones CSS3, pero al mismo tiempo proporciona alternativas para versiones anteriores de navegadores. Glide.js es simple y liviano.

Uso 1. Conectar jQuery

La única dependencia del complemento es jQuery, que debemos incluir primero:

2. Conecte Glide.js

3. Agregar HTML

Conectemos los estilos básicos.

Creemos la estructura html del control deslizante.

4. Inicialización

Inicie el control deslizante con la configuración predeterminada...

$(".deslizador").glide();

...o personalízalo tú mismo

$(".slider").glide(( reproducción automática: 5000, flechas: "cuerpo", navegación: "cuerpo" ));

Ajustes

Lista de parámetros disponibles:

Parámetro	Valor por defecto	Tipo	Descripción
auto-reproducción	4000	entero/bool	Desplazamiento automático (falso para desactivar)
pausa flotante	verdadero	booleano	Pausar el desplazamiento automático al pasar el mouse sobre el control deslizante
animaciónTiempo	500	En t	!!! Esta opción funciona si el navegador NO soporta css3. Si el navegador admite css3, entonces este parámetro debe cambiarse en el archivo .css.
flechas	verdadero	booleano/cadena	Mostrar/ocultar/adjuntar flechas. True para mostrar flechas en el contenedor del control deslizante. Falso para ocultar. También puede especificar el nombre de la clase (ejemplo: ".class-name") para adjuntar un código html especial
flechasWrapperClass	flechas deslizantes	cadena	La clase que será asignada al contenedor con flechas.
flechaMainClass	flecha deslizante	cadena	Clase principal para todas las flechas.
flechaDerechaClase	flecha-deslizador--derecha	cadena	Clase de flecha derecha
flechaIzquierdaClase	flecha-deslizador--izquierda	cadena	Clase de flecha izquierda
flechaDerechaTexto	próximo	cadena	Texto de flecha derecha
flechaTextoIzquierdo	anterior	cadena	Texto de flecha izquierda
navegación	verdadero	booleano/cadena	Mostrar/ocultar/fijar navegación por diapositivas. Fiel a mostrar. falso para ocultar
Centro de navegación	verdadero	booleano	Navegación por centro
clase de navegación	navegación deslizante	cadena	Clase para el contenedor de navegación.
navItemClass	control deslizante-nav__item	cadena	Clase para el elemento de navegación.
navCurrentItemClass	control deslizante-nav__item--actual	cadena	Clase para el elemento de navegación actual.
teclado	verdadero	booleano	Desplazarse por la diapositiva al presionar los botones izquierda/derecha
toqueDistancia	60	entero/bool	Soporte táctil. Falso para desactivar esta función.
antes de iniciar	función()()	función	Una devolución de llamada que se ejecutará antes de que se inicialice el complemento.
después de inicio	función()()	función	Devolución de llamada que se ejecutará después de que se inicialice el complemento
antes de la transición	función()()	función	Una devolución de llamada que se ejecutará antes de desplazar el control deslizante.
después de la transición	función()()	función	Devolución de llamada que se ejecutará después de desplazar el control deslizante

API

Para usar la API, escriba deslizamiento en una variable.

Var deslizamiento = $(".slider").glide().data("api_glide");

Los métodos API ahora están disponibles para usted.

Glide.jump(3, console.log("¡Guau!"));

• .current() - Devuelve el número del lado actual
• .play() - Iniciar el desplazamiento automático
• .pause() - Detener el desplazamiento automático
• .next(callback): desplaza el control deslizante hacia adelante
• .prev(devolución de llamada): desplaza el control deslizante hacia atrás
• .jump(distancia, devolución de llamada): cambia a una diapositiva específica
• .nav(target): adjunta la navegación a un elemento específico (por ejemplo: "body", ".class", "#id")
• .arrows(target): adjunta flechas a un elemento específico (por ejemplo: "body", ".class", "#id")

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

Descripción de cómo funciona el control deslizante.

Las diapositivas estarán alineadas y se desplazarán después de un cierto tiempo.

El marco rojo muestra la parte visible del control deslizante.

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

Cuando el control deslizante llega al final, una copia del mismo desde el principio del control deslizante se coloca instantáneamente 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 simple con desplazamiento automático. Requiere dos contenedores para funcionar. El primero establecerá el tamaño del área visible del control deslizante y el segundo es necesario para colocar controles deslizantes en él. El diseño del control deslizante se verá así:

Estilos de control deslizante. )

Container.slider-box especifica las dimensiones del control deslizante. Usando la propiedad overflow:hidden, se ocultan todos los elementos que no están incluidos en el área dentro del elemento.

Container.slider está configurado en un ancho mayor. Esto es necesario para que todas las diapositivas encajen en la línea.

Las diapositivas se alinean usando la propiedad float:left.

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

Guion

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

$(function () ( var width= $(".slider-box" ) .width () ; // Ancho del control deslizante. intervalo = 4000 ; // Intervalo de cambio de diapositiva. $(".slider img:last" ) .clone () .prependTo (".slider" ); // Una copia de la última diapositiva se coloca al principio. $() .eq (1 ) .clone () .appendTo ( "slider" ); // Una copia de la primera diapositiva se coloca al final. // Container.slider se desplaza hacia la izquierda el ancho de una diapositiva setInterval("animation()" , intervalo); // Se inicia la función animación() para cambiar de diapositiva. ) ) ; función de animación() (var margin = parseInt($(".slider") .css ("marginLeft") ); // Bloque actual offset.slider width= $(".slider-box" ) .width (), / / Ancho del control deslizante. slidersAmount= $(".slider" ) .children () .length ; // Número de diapositivas en el control deslizante. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Si el actual la diapositiva no es la última, (margen= ancho-margen; // entonces el valor del margen se reduce según el ancho de la diapositiva. ) else ( // Si se muestra la última diapositiva, $(".slider" ) .css ( "margin-left", - ancho); // luego block.slider regresa a su posición inicial, margen=- ancho* 2; ) $(".slider" ).animate (( marginLeft: margin), 1000); / / Block.slider se desplaza 1 diapositiva hacia la izquierda. );

El resultado fue un control deslizante simple con desplazamiento automático sin fin.