em
jQuery Slider with CSS Transitions

jQuery Slider with CSS Transitions

jQuery Slider with CSS Transitions

Já havia desenvolvido esse slider a algum tempo atrás, onde ele consiste em efetuar as transições entre os slides com CSS3 Transitions, e nos browsers que não possuem suporte a essa propriedade a animação ocorre através do jQuery animate. Em sua primeira versão eu utilizava Modernizr para checar se o browser possuía suporte a tal funcionalidade, mas era como tentar colocar um motor de Ferrari dentro de um Fusca.

Foi então que acabei criando um código mais simples, onde posso checar rapidamente se o browser possui suporte a tal feature CSS3 e fazer aquilo que desejo. O código para o Slider está no meu Github.

Esse Slider atualmente funciona em qualquer browser decente, e nos IEs 7 e 8 só funciona se for utilizado o jQuery 1.1*.* ou maior (como devem saber o jQuery 2.0 não é suportado nesses browsers). Veja um exemplo em funcionamento. Dicas de melhorias são sempre bem vindas.

Comentários

  1. Bacana! Você planeja desenvolver uma versão responsive e talvez uma outra para carrossel?

    por Edson Responder
    1. Pretendo pensar nisso futuramente.

      por Pedro Rogério Responder
  2. Olá amigo, estava brincando com esse código e tentando ver a possibilidade de adicionar captions para os slider’s … ficou super bacana seu trabalho se puder ajude nessa batalha dos captions abraços.

    por Rodrigo Dionízio Responder
    1. Se você sabe o básico de position em CSS basta utilizar position:absolute para que os captions fiquem encima das imagens.

      por Pedro Rogério Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>