O slider OneByone é um leveAssim, responsivo & em camadas O plug -in jQuery que você pode usar para exibir sua imagem e texto um por um. O Animação CSS3 é conduzido por Animate.css. Isso é Amigável para dispositivos móveisque suporta limpar a esquerda/direita no seu dispositivo de toque, como iPhone e iPad. Você também pode arrastar e soltar para navegar com o mouse. A atualização mais recente adiciona um exemplo extra, que faz Twitter Bootstrap Carousel Apoie um por uma animação.
Agora está disponível no WordPress (clique na imagem abaixo)
Alterar logs (por favor, faça o download novamente se você o comprar antes)
(Atualização 15 de maio de 2013)
-
Atualização para o jQuery 1.9.1e uso Modernizr Para detectar o suporte de transição CSS3. Você pode baixar novamente o pacote de origem se quiser usá-lo com o jQuery 1.9.1.
(Atualização 14 de novembro de 2012)
- Integrar com Bootstrap Carousel. Você pode usá -lo em sua estrutura favorita agora.
- Adicione a opção AutohideButton, defina como false para tornar as setas sempre visíveis.
- Atualize a documentação de ajuda.
(Atualização 14 de setembro de 2012)
- Adicionar responsivo exemplo.
- Adicione a transição FADE no IE9-, que não suporta a transição CSS3.
- Agora você pode Personalize a animação de cada slideaté cada elemento na animação do slide.
- Adicionar Passe o mouse para uma pausa opção da apresentação de slides.
- Adicionado ‘Fadeinleftbig’, ‘Fadeinrightbig’, ‘Fadeinupbig’, ‘FadeIndownBig’, ‘Flipinx’, ‘Flipiny’, ‘LightSpeedin’ Animation.
- Corrija bugs: o link não pode ser clicado no iOS.
- Atualização do JQuery 1.8.1.
Comprar a licença estendida?
Agradeço se você pode colocar o link deste item na descrição do seu item. Forneça apenas a versão minificada do arquivo JS no seu tema e uma licença estendida pode usar apenas um tema.
Características:
- Animação acionada por CSS3, Hardware acelerado CSS3 Transições para o navegador moderno suportado.
- Suporte responsivo, exemplo incluído.
- Amigável para dispositivos móveis, você pode usá -lo em um dispositivo de toque.
- É leve, o JavaScript compactado é apenas 4KB.
- Apresentação de slides de atraso automático opcional, compra opcional para pausar a apresentação de slides.
- A animação de cada slide ou elemento pode ser personalizada.
- Função de arrasto opcional do mouse.
- Estilo de animação opcional, pode ser aleatório ou qualquer outro tipo.
- Seta e botões opcionais.
- As perguntas frequentes estão incluídas no pacote de origem.
- Atualização gratuita, você pode baixar a atualização futura gratuitamente.
Sobre a transição CSS3
Nota: A transição CSS3 funciona apenas no navegador moderno como Firefox, Safar e Chrome. O que não funciona no IE7, 8 e 9, parece que o IE 10 o apoiará.
Para o usuário do jQuery 1.8.0
Parece que há um bug com o jQuery 1.8.0, faça o download da versão não compactada do jQuery e da linha de comentários 4521; em seguida, este plugin funcionará bem.
// throw new Error( "Syntax error, unrecognized expression: " + msg );
Configurações de plug -in disponíveis
// 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
EaseType disponível
‘fadeIn’, ‘fadeInUp’, ‘fadeInDown’, ‘fadeInLeft’, ‘fadeInRight’, ‘fadeInRight’, ‘bounceIn’, ‘bounceInDown’, ‘bounceInUp’, ‘bounceInLeft’, ‘bounceInRight’, ‘rotateIn’, ‘rotateInDownLeft’, ‘rotateInDownRight’, ‘rotateInUpLeft’, ‘rotateInUpRight’, ‘Fadeinleftbig’, ‘Fadeinrightbig’, ‘Fadeinupbig’, ‘FadeIndownBig’, ‘Flipinx’, ‘flipiny’, ‘LightSpeedin’ ou ‘Random’
Crédito
Animate.css é de Dan.
A imagem de fundo no exemplo de bootstrap é de Fotos8.
Recomendações para você
XML Imagem/Grade de Vídeo Galeria:
O modelo de Fotografia do Flash AS3:
Source