<
Menu

Tableless



5 sliders de conteúdo para jQuery

Sliders são ferramentas poderosas para destacar conteúdo em um site. Neste artigo você confere cinco opções de plugins jQuery para a implementação dessa funcionalidade.

Nivo Slider

Site oficial | Exemplos

O forte do Nivo Slider é um HTML limpo para a estrutura inicial do slider. Apenas um elemento div com imagens e links é necessário. O foco principal desse slider são imagens, mas o recurso de legenda em HTML acaba possibilitando a exibição de qualquer conteúdo.

Entre as opções oferecidas estão a velocidade e direção da transição e callbakcs para executar ações após o início e o carregamento dos slides. O plugin ainda possui nada mais, nada menos do que 16 opções de transição entre um slide e outro. Sua versão compactada possui 15kb.

Coda Slider

Site oficial | Demo

Este plugin surgiu baseado no slider do site do aplicativo Coda. Cada elemento do slide deve ser um elemento div com a classe “panel”.

O Coda Slider deixa um pouco a desejar na flexibilidade, oferecendo poucas opções, mas para exibir diferentes tipos de conteúdo é o plugin mais indicado.

Orbit

Site oficial

Desenvolvido originalmente para ser um slider de imagens, o Orbit acabou incorporando também conteúdo HTML, desde que o elemento div do conteúdo contenha um background definido.

Sua versão compactada é bem leve, 3.2kb e um outro diferencial bacana do Orbit é a aplicação de um loader marcando o tempo de transição entre os slides.

AnythingSlider

Site oficial | Exemplos

Como o próprio nome sugere, o AnythingSlider aceita tudo e qualquer tipo de conteúdo. Nas palavras do autor, “o plugin é uma tentativa de reunir todas as funcionalidades encontradas em outros plugins deste tipo”.

É o plugin mais adptável e que se integra melhor com o resto da sua aplicação oferencendo hashtags próprias para cada slide e possibilidade de criar um link direto para algum slide.

Moodular

Site oficial

O legal do Moodular é, como também o nome sugere, ser modular: core, control e effects. Dessa forma se você precisa de um slider simples não é necessário carregar o módulo de controle, por exemplo.

O módulo de efeitos do Moodular inclui o popular “reflection” (aquele da Apple) e a parte de controle já vem com suporte para aplicativos touchscreen, além de navegação via teclado.

Por Davi Ferreira

Programador apaixonado pelo que faz. Responsável pelo desenvolvimento de sistemas e interfaces para Globo.com, Confederação Brasileira de Vôlei, Ricoh Brasil, Embratel entre outros.

http://www.daviferreira.com/blog

Mais posts do autor

Comentários (24)

  • Marcos André

    Ótimo artigo Davi, hoje mesmo estava procurando por banners em JQuery, creio que um, destes cinco ira se encaixar no projeto que estou desenvolvendo.

    Parabéns.

  • Felipe

    Ótimos plugins, olha o qual eu uso:

    jquery.malsup.com/cycle/

    O Cycle me salva em vários projetos, tem bastante variedade e flexibilidade :D

  • Luís Henroque

    Gostei bastante do Nivo e do Orbit. O nivo, em particular, é tão flexível. O Cycle é bacana, muito fácil de usar (meu primeiro, inclusive). Parei de usar ele depois de um tempo pela maneira como ele vai do último para o primeiro slide.

  • http://www.systemice.org Júnio Moreira

    Ótimo artigo Davi.

    Sou meio iniciante na arte de programa JQuery. Estou com uma duvida.

    Existe a possibilidade de eu usar esses slides em um post do Blogger?

    Estava querendo fazer uma apresentação de slides com imagens e achei esses modelos legais. Pórem não sei como utilizá-los para gerar isso.

    Poderia me dar um auxilio.

    Obrigado.

  • http://www.ortense.com.br Marcus Ortense

    Muito bom, estava procurando mais algumas opções pra isso!
    Valew !

  • http://tutsmais.com.br/blog/ Ofelquis

    Bem do mau esses efeitos =)

    eu gosto de usar o plugin cycle http://jquery.malsup.com/cycle/
    por que com ele tem muitas opções de customização, é muito completo realmente

    Muito bom seu artigo =)

  • http://www.vivianeginez.com.br/ Viviane Ginez da Costa

    Muito bom Davi. Alguns de meus sites já foram desenvolvidos com estes efeitos.

    Obrigada!!

  • http://www.odirleiborgert.com.br Odirlei

    Muito bom os plugins, parabéns pela publicação.

  • http://bytepixel.wordpress.com Débora

    Ótimo artigo!
    Eu já usei o Nivo e o Circle, ótimos e práticos!

    Os demais também pareceram muito bons.

  • Vinicius

    Muito bom mesmo cara, mandou bem, Parabéns!

  • Lean

    Gostei muito de todos os sliders.. parabéns!
    Gostaria de colocar o orbit no meu site.
    Andei lendo o tutorial e não entendi como começa o processo de criação.

    Jquery é um programa?? onde posso encontra-lo?

    Ficarei muito grato se puder me ajudar. pois preciso de um slider o mais rápido possivel.

  • Pingback: Thiago Delgado | Tutorial: Meu primeiro slider com jQuery

  • Pingback: Seleção e análise de 7 jQuery Sliders livres para download!

  • Ted k’

    Muito bom, gostei de vários ai!!

  • http://agenciaoff.com/ AgênciaOFF

    Parabéns!!!!!!!

  • http://brasfootbrasil.net/ Caio Vidal

    Muito bom, adorei o ultimo slider, muito util

  • Ripador0

    Venho divulgar o trabalho brazuca de slider, com javascript e Css:

    Como criar um Slider com JavaScript e setInterval
    http://pt.scribd.com/doc/88491932/Como-criar-um-Slider-com-JavaScript-e-setInterval

    free e livre para alterações

  • Felipedpc

    Bacana os sliders, gostei do nivo mas não consegui fazer ele funcionar.
    Coloquei esta parte no header.

    e inseri no html a div:

    sei que esta faltando algo para ele funcionar, mas não estou conseguindo.

    Alguém pode me ajudar?

    Obrigado

  • Henriquehvisa

    Felipe está faltando fazer a chamada do método no js.

         $(function() {
              $(‘#slider’).nivoSlider();
           });

  • Gilmar Oliveira

    AJUDA!!!!!!

     

    Pessoal,
    boa tarde…quem fala (escreve) é o Gilmar, estou precisando de uma ajuda,
    conheci o jquery agora e estou fascinado por ele e os recursos que tem, estou
    ainda aprendendo, já fiz algumas coisas com ele, bem pouca coisa pois esto no
    início.

    Bom
    meu pedido de ajuda é sobre o seguinte, eu acho que pra quem conhece é bem
    fácil, estou precisando de um slide show onde iria imagens e textos (1 linha de
    paragrafo), com um link para todo o conteúde referente esta imagem, e as
    imagens do slide show, quando o visitante clicasse neste link mostrasse um
    caixa ou uma janela com este conteúdo. Eu criei meu lay-out no photoshop e
    exportei para o dreamweaver, este slide fica num determinado local, com pré-definições
    de width e heigth pra ser exato (472 X 200).

    Será
    que podem me ajudar, com algum tutorial ou vídeo aula??

     

    Fico
    ansioso no aguardo.

     

    Vlw

     

    Gilmar
    Oliveira

  • gabriel

    Bom dia Galera, vocês conseguiram implementar esse slider?
    Estou como muita dificuldade tem que abaixar qual biblioteca do Jquery?
    Tem como alguem explicar passo a passo como colocar ele em um site html.

    Obrigado.

    Gabriel.

  • Christiano Campos

    Muito bom!

  • Rogério

    parabéns !

  • Guilherme

    Alguem sabe dizer pq meu orbit buga no ie7 alguem tem solução para isto ?