Foundation - Referência de JavaScript de mídia
Descrição
O Foundation fornece componentes JavaScript para a órbita conforme listado abaixo.
Inicializando
Para usar o plugin órbita, foundation.core.js , foundation.orbit.js arquivos devem ser incluídos em sua JavaScript. Este plugin requer as seguintes bibliotecas de utilitários -
foundation.util.keyboard.js
foundation.util.motion.js
foundation.util.timerAndImageLoader.js
foundation.util.touch.js
Foundation.Orbit
Ele é usado para criar uma nova instância de um carrossel da órbita.
var elem = new Foundation.Orbit(element);| Sr. Não. | Nome e Descrição | Tipo |
|---|---|---|
| 1 |
element É um objeto jQuery para transformar em um carrossel. |
jQuery |
| 2 |
options Ele substitui as configurações padrão do plugin. |
Objeto |
Opções de plug-in
Você pode usá-los para personalizar a instância de uma órbita. Ele pode ser definido como atributos de dados separados, um atributo de opções de dados mesclado ou como um objeto passado para o construtor do plugin. A tabela a seguir lista as opções de plug-in usadas no Foundation.
| Sr. Não. | Nome e Descrição | Exemplo |
|---|---|---|
| 1 |
bullets Diz ao JS para carregar os marcadores. |
verdadeiro |
| 2 |
navButtons Diz ao JS para adicionar ouvintes de eventos aos botões de navegação. |
verdadeiro |
| 3 |
animInFromRight classe de animação motion-ui a ser aplicada. |
'deslizar para direita' |
| 4 |
animOutToRight classe de animação motion-ui a ser aplicada. |
'slide-out-right' |
| 5 |
animInFromLeft classe de animação motion-ui a ser aplicada. |
'slide-in-left' |
| 6 |
animOutToLeft classe de animação motion-ui a ser aplicada. |
'slide-out-left' |
| 7 |
autoPlay Ele permite que a órbita seja animada automaticamente no carregamento da página. |
verdadeiro |
| 8 |
timerDelay Representa o tempo em ms que será aplicado para a transição do slide. |
5000 |
| 9 |
infiniteWrap Faz um loop infinito por meio de slides |
verdadeiro |
| 10 |
swipe Ele permite que os slides orbitais vinculem os eventos de furto para dispositivos móveis. |
verdadeiro |
| 11 |
pauseOnHover Ele permite que as funções de tempo pausem a animação ao pairar sobre ela. |
verdadeiro |
| 12 |
accessible Ele liga os eventos do teclado ao controle deslizante. |
verdadeiro |
| 13 |
containerClass Aula aplicada ao container da órbita. |
'orbit-container' |
| 14 |
slideClass Aula aplicada a slides individuais da órbita. |
'orbit-slide' |
| 15 |
boxOfBullets Classe aplicada ao recipiente do marcador. |
'orbit-bullets' |
| 16 |
nextClass Aula aplicada ao próximo botão. |
'orbit-next' |
| 17 |
prevClass Aula aplicada ao botão anterior |
'orbit-anterior' |
| 18 |
useMUI Ele define Boolean para sinalizar o JS para usar classes de interface do usuário de movimento ou não. Para compatibilidade com versões anteriores, o padrão é verdadeiro. |
verdadeiro |
Eventos
Esses eventos serão acionados a partir de qualquer elemento com um plugin anexado. O slidechange.zf.orbit será disparado quando a animação terminar com o slide.
Funções
O .geoSync define um objeto temporizador e inicia o contador para o próximo slide.
.changeSlide
Isso muda o slide para um novo. Ele dispara eventos de evento Orbit # para mudança de slide. A tabela a seguir lista os eventos que serão acionados.
| Sr. Não. | Nome e Descrição | Tipo |
|---|---|---|
| 1 |
isLTR Sinaliza quando o slide deve se mover da esquerda para a direita. |
boleano |
| 2 |
chosenSlide Elementos jQuery do slide a serem exibidos a seguir, quando um for selecionado. |
jQuery |
| 3 |
idx Representa o novo índice de slides em sua coleção, quando um é escolhido. |
Número |
O .destroy destrói o carrossel e esconde o elemento.