El control deslizante OneByOne es un ligero, sensible & en capas Complemento jQuery que puede usar para mostrar su imagen y texto uno por uno. los Animación CSS3 es conducido por Animar.css. Es compatible con dispositivos móviles, que admiten el barrido hacia la izquierda/derecha en su dispositivo táctil como iPhone y iPad. También puede arrastrar y soltar para navegar con el mouse. La última actualización agrega un ejemplo adicional, que hace que Twitter Bootstrap Carousel admita la animación uno por uno.
Ahora está disponible en WordPress (haga clic en la imagen de abajo)
Cambiar registros (por favor, vuelva a descargarlo si lo compró antes)
(actualizado el 15 de mayo de 2013)
Actualizar a la jQuery 1.9.1y use modernizar para detectar el soporte de transición CSS3. Puede volver a descargar el paquete fuente si desea usarlo con jQuery 1.9.1.
(actualizado el 14 de noviembre de 2012)
- Integrar con Carrusel de arranque. Puedes usarlo en tu marco favorito ahora.
- Agregue la opción autoHideButton, establezca en falso para que las flechas siempre estén visibles.
- Actualice la documentación de ayuda.
(actualizado el 14 de septiembre de 2012)
- Agregar sensible ejemplo.
- Agregue transición de desvanecimiento en IE9-, que no es compatible con la transición CSS3.
- Ahora usted puede personalizar la animación de cada diapositivaincluso cada elemento en la animación de la diapositiva.
- Agregar pasar el cursor para hacer una pausa opción de la presentación de diapositivas.
- Se agregó la animación ‘fadeInLeftBig’, ‘fadeInRightBig’, ‘fadeInUpBig’, ‘fadeInDownBig’, ‘flipInX’, ‘flipInY’, ‘lightSpeedIn’.
- Corrección de errores: no se puede hacer clic en el enlace en iOS.
- Actualice a jQuery 1.8.1.
¿Comprar la licencia extendida?
Le agradezco si puede poner el enlace de este artículo en la descripción de su artículo. Proporcione solo la versión reducida del archivo js en su tema, y solo se puede usar una licencia extendida en un tema.
Características:
- Animación impulsada por CSS3, hardware acelerado Transiciones CSS3 para navegadores modernos compatibles.
- Soporte receptivo, ejemplo incluido.
- Compatible con dispositivos móviles, puede usarlo en un dispositivo táctil.
- Es liviano, el javascript comprimido es de solo 4kb.
- Presentación de diapositivas con retraso automático opcional, hove opcional para pausar la presentación de diapositivas.
- La animación de cada diapositiva o elemento se puede personalizar.
- Función de arrastre opcional del ratón.
- Estilo de animación opcional, puede ser aleatorio o de cualquier otro tipo.
- Flecha y botones opcionales.
- Las preguntas frecuentes están incluidas en el paquete fuente.
- Actualización gratuita, puede descargar la actualización futura de forma gratuita.
Acerca de la transición de CSS3
Nota: La transición CSS3 solo funciona en navegadores modernos como Firefox, Safar y Chrome. Lo cual no funciona en IE7, 8 y 9, parece que IE 10 lo admitirá.
Para usuarios de jQuery 1.8.0
Parece que hay un error con jQuery 1.8.0, descargue la versión sin comprimir de jQuery y comente la línea 4521, luego este complemento funcionará bien.
// throw new Error( "Syntax error, unrecognized expression: " + msg );
Configuraciones de complementos disponibles
// the wrapper's name className: 'oneByOne', // the wrapper div's class name of each slider sliderClassName: 'oneByOne_item', // pause the auto delay slideshow when user hover pauseByHover: true, // the global ease animation style, // take effect if you don't pre-defined it in the element easeType: 'fadeInLeft', // width of the slider width: 960, // height of the slider height: 420, // the delay of the touch/drag tween delay: 300, // the tolerance of the touch/drag tolerance: 0.25, // enable or disable the drag function by mouse enableDrag: true, // display the previous/next arrow or not showArrow: true, // auto hide the arrows when user leave the slider or not autoHideButton: true, // display the circle buttons or not showButton: true, // auto play the slider or not slideShow: false, // the delay millisecond of the slidershow slideShowDelay: 3000, // set responsive to true, when you'll change the // slider's size with the media query in CSS responsive: true // when slider is smaller than minWidth, // the text are be hidden in the responsive minWidth: 480
Tipo de facilidad disponible
‘fundido’, ‘fundido hacia arriba’, ‘fundido hacia abajo’, ‘fundido hacia la izquierda’, ‘fundido hacia la derecha’, ‘fundido hacia la derecha’, ‘rebote hacia adentro’, ‘rebote hacia abajo’, ‘rebote hacia arriba’, ‘rebote hacia la izquierda’, ‘rebote hacia la derecha’, ‘rotar hacia adentro’, ‘rotar hacia abajo hacia la izquierda ‘, ‘rotateInDownRight’, ‘rotateInUpLeft’, ‘rotateInUpRight’, ‘fadeInLeftBig’, ‘fadeInRightBig’, ‘fadeInUpBig’, ‘fadeInDownBig’, ‘flipInX’, ‘flipInY’, ‘lightSpeedIn’ o ‘random’
Crédito
Animate.css es de Dan Eden.
La imagen de fondo en el ejemplo de arranque es de photos8.
Recomendaciones para ti
Galería de cuadrícula de imágenes/vídeos XML:
La plantilla de fotografía Flash AS3:





