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
  3. Boa noite, muito bom seu post Pedro me ajudou bastante com um problema que estava enfrentando aqui em um projeto.

    por Criação de sites em brasilia 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>