Arquivo da tag: deslizante

Como criar um slider multi-item simples – Codrops

Artigo original: How to create a simple multi-item slider

Um tutorial sobre como criar um slider simples de categorias com design minimalista usando animações CSS e jQuery. A ideia é que os itens deslizem sequencialmente conforme a direção do slide, ou seja, dependendo da posição dos itens.

Imagem de demonstração

Veja a demonstração aqui

Para o tutorial de hoje nós queremos mostrar a vocês como criar um slider simples de itens com animações CSS e um pouco de jQuery. A ideia foi inspirada pelo slider de produtos do site da Apple onde vários itens deslizam flutuando com um certo balanço. Nós procuramos traduzir este conceito em uma alternativa com visual moderno e minimalista para uma loja online, onde os itens representam diferentes categorias de produtos. Categorias se encaixam bem como caso de uso aqui por causa da natureza limitada deste tipo de slider. Para mostrar mais itens, essa não é a melhor solução, mas se a quantidade de itens é pouca, isso pode dar um pequeno toque de charme à experiência.

Então vamos começar o tutorial!

Ei! Depois de ler essa tradução será mais fácil ler o artigo original! Isso fará você treinar sua leitura em inglês. Assim você tem acesso a muito material de alta qualidade, de certa forma isso diferencia os meninos dos homens ;) .

Continuar lendo