Foundation - Referencia de JavaScript de medios
Descripción
Foundation proporciona componentes de JavaScript para la órbita que se enumeran a continuación.
Inicializando
Para usar el complemento orbit, los archivos foundation.core.js , foundation.orbit.js deben incluirse en su JavaScript. Este complemento requiere las siguientes bibliotecas de utilidades:
foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.timerAndImageLoader.js
foundation.util.touch.js
Fundación.Orbita
Se utiliza para crear una nueva instancia de un carrusel de la órbita.
var elem = new Foundation.Orbit(element);| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 | element Es un objeto jQuery para convertirlo en un carrusel. |
jQuery |
| 2 | options Anula la configuración predeterminada del complemento. |
Objeto |
Opciones de complementos
Puede utilizarlos para personalizar la instancia de una órbita. Se puede establecer como atributos de datos separados, un atributo de opciones de datos combinado o como un objeto pasado al constructor del complemento. La siguiente tabla enumera las opciones de complementos utilizadas en Foundation.
| No Señor. | Nombre y descripción | Ejemplo |
|---|---|---|
| 1 | bullets Le dice al JS que cargue viñetas. |
cierto |
| 2 | navButtons Le dice al JS que agregue detectores de eventos a los botones de navegación. |
cierto |
| 3 | animInFromRight clase de animación motion-ui que se aplicará. |
'deslizar hacia la derecha' |
| 4 | animOutToRight clase de animación motion-ui que se aplicará. |
'deslizamiento hacia la derecha' |
| 5 | animInFromLeft clase de animación motion-ui que se aplicará. |
'deslizar hacia la izquierda' |
| 6 | animOutToLeft clase de animación motion-ui que se aplicará. |
'deslizar hacia afuera-izquierda' |
| 7 | autoPlay Permite automáticamente que la órbita se anime al cargar la página. |
cierto |
| 8 | timerDelay Representa el tiempo en ms que se aplicará para la transición de diapositivas. |
5000 |
| 9 | infiniteWrap Se repite infinitamente a través de diapositivas. |
cierto |
| 10 | swipe Permite que las diapositivas orbitales unan los eventos de deslizamiento para dispositivos móviles. |
cierto |
| 11 | pauseOnHover Permite que las funciones de temporización pausen la animación al pasar el mouse sobre ella. |
cierto |
| 12 | accessible Vincula los eventos del teclado al control deslizante. |
cierto |
| 13 | containerClass Clase aplicada al contenedor de la órbita. |
'contenedor de órbita' |
| 14 | slideClass Clase aplicada a diapositivas individuales de la órbita. |
'deslizamiento de órbita' |
| 15 | boxOfBullets Clase aplicada al contenedor de la bala. |
'balas de órbita' |
| dieciséis | nextClass Clase aplicada al siguiente botón. |
'órbita-siguiente' |
| 17 | prevClass Clase aplicada al botón anterior |
'órbita anterior' |
| 18 | useMUI Establece Boolean para marcar el JS para usar o no clases de interfaz de usuario de movimiento. Para la compatibilidad con versiones anteriores, el valor predeterminado es verdadero. |
cierto |
Eventos
Estos eventos se activarán desde cualquier elemento con un complemento adjunto. El slidechange.zf.orbit se activará cuando la diapositiva termine la animación.
Funciones
El .geoSync establece un objeto de temporizador e inicia el contador para la siguiente diapositiva.
.changeSlide
Cambia la diapositiva por una nueva. Se dispara # eventos Orbit eventos para el cambio de diapositivas. La siguiente tabla enumera los eventos que se activarán.
| No Señor. | Nombre y descripción | Tipo |
|---|---|---|
| 1 | isLTR Señala cuando la diapositiva debe moverse de izquierda a derecha. |
Booleano |
| 2 | chosenSlide jQuery elementos de la diapositiva para mostrar a continuación, cuando se selecciona uno. |
jQuery |
| 3 | idx Representa el nuevo índice de diapositivas de su colección, cuando se elige uno. |
Número |
El .destroy destruye el carrusel y oculta el elemento.