Banners em slide com CSS e JQuery

  • Publicado em: 20/12/2010
  • Revisado em: 16/10/2012
  • Categoria(s)Ajax | Jquery, HTML e CSS
  • Autor: Ricardo Bernardi
  • Newsletter: Inscreva-se

Devido ao grande sucesso do outro sistema de banners em slide postado aqui no blog, estou disponibilizando hoje mais um exemplo de banners em slide usando CSS e JQuery. Trata-se de um sistema de banners com troca automática de slides, pausa quando o mouse está sobre o slide e uma aparência super bonita.

Todos os fontes estão inclusos no download, portanto você poderá personalizar a seu gosto como preferir. Implementei este sistema somente em sites, confesso que nunca usei no WordPress, portando se alguém quiser adaptar para WP e disponibilizar o código toda comunidade agradece.

Veja um exemplo do sistema na imagem abaixo:

 

Baixe o seu agora mesmo, personalize a seu gosto e torne seu site muito mais atraente e descolado. Faça o download do sistema de banners em slide aqui.

Fonte: Webdeveloperplus.com

Compartilhe esse post:

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 28 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • carlos comentou em

    tem como ensinar buscar imagem do bando de dados com php ?tentei mais nao consegui sincronizar as fotos maiores com as menores...

    Responder
    • carlos augusto comentou em

      ola consegui buscar do banco ficou bom ,agora surgiu outro desejo tem como ensinar fazer as fotos menores rolar pra cima e pra baixo ?

      Responder
  • alexandresilva83 comentou em

    Gostaria que ao colocar o mouse sobre a miniatura alterasse a imagem ao lado e permanecesse pausada enquanto o mouse estivesse sob a imagem. Alguém poderia me auxiliar?
    obrigado.

    Responder
  • Rafael Almeida Santos comentou em

    Muito obrigado ricardo estava com umas duvidas sobre Jquery e o codigo e o video que vi no you tube me ajudaram muito no entedimento VLW e o site aqui e show

    Responder
  • Cleber comentou em

    Galera da RB. Realmente vcs estão de parabéns. Muito obrigado por ajudar as pessoas a aprender sempre algo mais. É assim que se constrói um mundo melhor. Deus abençoe vcs.

    Responder
  • Hasmiiller comentou em

    Tem como eu acrescentar mais "featured li.ui" sem alterar o tamanho, para q eles fiquem subindo, então sumindo o d cima e entrando o de baixo sequencialment? Vlw

    Responder
  • Jamilson comentou em

    Primeiramente gostaria de agradecer por este tutorial, muito bom mesmo. Consegui fazer tudo certo numa página sem nenhuma variavel em php setada, más quando jogo numa página do meu site onde existem variaveis em php já instanciadas ocorre problema, por exemplo o link para os slides fica site?variavel=valor#fragment-1. Desse modo não se consegui acessar a id abaixo. Se tiver alguma forma que vc conheça que possa resolver este problema ficaria muito grato.

    Responder
  • Dowglas Maia comentou em

    cara muito legal sua video aulas...
    boa iniciativa.... tabem estou querento postar alguns dos meus conhecimentos...
    estou entrando agora nu mundo da web designer....
    suas aulas estão mi ajundo bastante....

    Responder
  • Ricardo, como faço para transforma-lo em um codigo html (como embed do youtube) e simplesmente colar no gadget? Eu tenho um blog e pretendo acrescentar o banner em slide.

    Responder
  • Denil comentou em

    Ola Rircado gostei muito, mas preciso sabe como faço para implementar no site?

    tem como fazer um roteiro para colocar no site

    manda neste email

    Responder
  • Luiz F. S. Lima comentou em

    Blz Ricardo.
    Pela boa funcionalidade desses dois sistemas de banners, ainda continuo
    fazendo testes com esse sistema, acho ele pratico.
    Estou tentando implementar esse sistema no wp, mas acho que esta dando uma especie de conflito. Vc conhece algum tutorial que exemplifique como faz esse tipo de implementação?
    Estou em fase de pesquisa e testes (pesquisando, inserindo e removendo algo e testando). Qdo consiguir posto o codigo.
    Mais uma vez valeu pela atençao

    Responder
  • Emanoel comentou em

    Ricardo deu 100% blz testei em alguns navegadores, só deu falha como sempre no explorer 6.0, vlw tá demais o teu blog... quando terminar o meu projeto completo te passo o link pra tu dar uma olhada abraço...

    Responder
  • Emanoel comentou em

    Ricardo, percebi que ao carregar a página as imagens ficam todas dispersas e depois que a página carrega é que as imagens retornam pro lugar, tentei algumas possibilidades, porém ainda não consegui.
    Tem alguma idéia?

    T+ Parabens pelo blog

    Responder
  • É Isso ai Ricardo, Gosto Muito Desses Efeitos em Banners com Css e Jquery, Pois se Puder tá trazendo mais para o site, ficarei grato.

    Um Forte Abraço e Até a Próxima!

    Responder
  • @Lucivan: obrigado pelo comentário.

    @Oseias Costa: como mencionei no post, não fiz implementação dele em WP, se alguem se habilitar a fazer as adaptações e quiser disponibilizar o código ficarei grato.

    Responder
  • Oseias Costa comentou em

    Fala aee Ricardo..
    Valeu pela dica...
    Uma Sugestao... Que tal vc fazer uma videoaula mostrando como implementar o codigo no wordpress... Ficaria muito grato..

    Obrigadoo

    Responder
  • Lucivan comentou em

    Opa... Ricardo, mais um vez muito obrigado por disponibilizar esse material...

    você e Site estão de parabéns....

    Obrigado

    Responder

Deixe seu comentário