Sistema de banners em slide com CSS e JCycle

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Bom eu mal tinha terminado de colocar o sistema de destaques em slide na home do blog e já tinha gente me pedindo como fazia um sistema de banners em slide...

Atendendo aos pedidos, estou disponibilizando o código fonte dos slides para que todos possam usufruir deste benefício. O codigo está semi-comentado e é de fácil entendimento, quem tiver dúvidas deixe um comentário...

Você pode facilmente pegar as informações de um banco de dados para alimentar os slides ou até mesmo pegar os posts do blog como no meu caso. Veja na imagem abaixo uma prévia do sistema:

 

Baixar sistema de banners em slide

Editado em 17/02/2011:

Sugestão recebida por email do colega Irison:

Olá Ricardo, eu vi que no seu site quando acessa a página principal as imagens do cycle ficam empilhadas e só depois elas se ajustam, eu resolvi isso colocando um overflow:hidden; na div principal do cycle que no meu caso é a #destaques, não sei se já tentou corrigir ou se tentou algo e desajustou outras configurações, mas vendo o "erro" resolvi lhe informar uma possível solução caso se interesse.

Na verdade eu coloquei o overflow:hidden na seguinte parte do CSS:

#destaques ul, #destaques ul li, #destaques ul li img {overflow:hidden}

Pois colocando na div principal (#destaques) não tive o resultado esperado.

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 60 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Marcelo Augusto comentou em

    O que eu insiro no header.php do meu tema? O html? Do jeito que tá aí é só copiar e colar ou tem que alterar alguma coisa?

    Responder
  • Boa tarde,

    Instalei esse plugin no blog do site da empresa onde trabalho. Funcionou perfeitamente, porém eu não consigo ver mais do que os 5 posts que são mostrados no slide.

    Por favor, você sabe me dizer o que eu fiz errado?
    Obrigado.

    Responder
  • Zanette comentou em

    E S P E T A C U L A R ! ! !
    Mto bom o script, simples, prático e bastante funcional.
    Meus parabéns e principalmente meu MTO OBRIGADO!

    Responder
  • Dairon comentou em

    Minha dúvida é a seguinte.
    o código é colocado entre as tags

    a pagina q estou desenvolvendo é em php. e a área está separada
    do conteúdo. estou juntando pelo
    entao ela fica bagunçada, tem alguma maneira de eu fazer sem colocar o na header ?
    pois pelo que eu tentei colocar no não funcionou x:
    obg

    Responder
  • Hudson Verão comentou em

    Olá, amigão inseri o slide tranquilo,porem eu uso um script lightbox em uma sidebar com fotos do site http://www.graciebarrams.com.br/ quando o eu coloco o script do banner fica o banner perfeito iguazinho o seu so que o lightbox do site não funnciona ele abre as fotos mas o efeito não acontece.
    Ja tentei fazer as alterações mas não deu em nada, da um help ai!!!

    Responder
  • Alex comentou em

    como posso pegar o id das imagens para fazer uma contagem de impressão, seria uma boa, tentei no li mas nao sei pega-lo no jquery

    Responder
  • Tammy comentou em

    Cara,
    minha dúvida pode ser a mais noob, mas... Consegui fazer tudo, funcionando perfeito. Mas nao consigo tirar os números dos slides...

    :(

    Responder
  • Alan Silva - Pará comentou em

    Cara! Show de Bola.
    Fico feliz em ver que tem gente que dispõe de seu tempo muito precioso, para ajudar aqueles que precisam dessa luz. Valeu mesmo!

    Responder
  • Luiz Fernando S. Lima comentou em

    Excelente tutorial, funcionou perfeito.
    Gostaria de saber se é possivel configurar pra aparecer as categorias em vez do numero de posts (1,2,3,4,5)? De qualquer forma vou tentando..., se conseguir eu posto um comentário com o codigo.
    Valeu Ricardo, o video ficou otimo..., (estou tentando tambem implementar o outro sistema que vc postou o codigo recentemente vendo esse video..., to quase conseguindo..rs,qdo conseguir tbm posto aqui o codigo).
    Brigadisssimo.
    Abs

    Responder
  • Netinho Ximenes comentou em

    Meu Brother lhe peço até pelo amor de Deus, mostre como colocar esse sistema no wordpess?
    de ah lhe agradeço....
    a paz...

    Responder
  • Amilcar Veiga comentou em

    Cara, muito obrigado por disponibilizar esse sistema .. Para iniciantes isso ajuda muitoo ..
    Obrigadoo .. Ótimo o Sistemaaa hehehe

    Responder
  • Wesley Sampa comentou em

    Olá Ricardo, olha eu dinovo rsrrsrs,

    Bom a minha volta se dá há uma pequena dúvida referente a uma das minhas perguntas acima, como as imagens ficam uma por cima da outra eu resolvi usar o recurso de iframe para puxar as imagens em uma pasta e assim eu consigo trabalhar no template do projeto sem ver as imagens da forma que ficam, até que deu certo em partes, eu até puxo as imagens da pasta usando o iframe sem problemas, porém estou enfrentando um pequeno problema quando ao posicionamento dentro do template e queria ver se é possível ajustar isso dentro do css do slideshow, e como eu sou meio cruzão nessa parte queria ver a sua opnião quanto a isso se seria ou não possível os ajustes que preciso fazer.

    As imagens que estou usando tem o tamanho de 800x251 e para que elas possam ser vizualizadas pelo iframe sem cortes eu tenho que colocar um tamanho no código iframe de 820x260, mas com isso eu acabo perdendo o ajuste da tela do template e fica fora, aqui vc pode visualizar o que estou dizendo - http://www.engenhariabeta.com.br/site

    O que poderia ajudar-me nessa questão ai?

    Responder
  • Adriano Marafanti comentou em

    acho que consegui arrumar no google chrome... eu mexi algumas coisas mais acho q foi qdo mexi nesta linha:

    #destaques{position: relative; width:100%; height:330px; padding:0; margin:0px 0px 0px 0px; float:left; background-color:#000; line-height:330px;}

    adicionando o line-height:330px;

    aqui ta rodando normal agora no chrome tbm.. abraco!

    Responder
  • Olá meu caro Ricardo, primeiramente quero lhe dar os parabéns pelo post, realmente me salvou rsrsrs, estava me matando para criar um recurso em flash parecido porém sem sucesso, então resolvi usar o seu recurso e funcionou, mas a imagem "Destaque" que aparece no canto da imagem não quer aparecer depois que coloquei o código na minha página. Então vamos ao que fiz;

    Primeiro eu alterei os links para as imagens que eu queria colocar, até ai tudo funcionou, localmente a imagem de destaque aparece, dai eu peguei os códigos e publiquei eles na página que eu quero ter o sistema rodando e simplesmente a imagem de destaque não aparece mais, a mesma encontra-se na pasta de imagens junto com as outras e só ela que não quer mais aparecer. A única coisa diferente que existe é que o sistema agora esta dentro deu uma página em PHP, mas creio que isso não tem nada a ver porque as demais aparecem.

    Já olhei o código em busca de alguma coisa, mas como ainda sou iniciante no assunto não conseguir encontrar nada, por isso venho aqui pedir-lhe um HELP sobre o assunto, as imagens que alterei estão aqui nesse link - http://www.engenhariabeta.com.br/projeto/destaques/.

    Outra coisa que também não conseguir fazer foi a alteração que voce sugere acima, eu não sei onde ou em que parte eu devo colocar o código citado, realmente fiquei perdido rsrsrs, queria sua ajuda quanto a isso.

    E por último, quando visualizamos o recurso dentro do Dreamweaver vi que as imagens ficam uma por cima da outra (a solução acima diz respeito a isso?), dessa forma fica complicado de trabalhar porque o template fica cumprido devido a isso.

    Fico no aguarde de suas respostas quanto as minhas dúvidas acima, e mais uma vez parabéns pelo post.

    []'s

    Wesley Sampa

    Responder
  • Wagner Gilberto comentou em

    Assim como o outro sistema de banner postado aqui mesmo, este também é show de bola, obrigado por compartilhar esta ideia, parabéns.

    Responder
  • Muito bom esse sistema de banner, ainda mais por que é uma ótima alternativa para quem não quer ou não sabe usar o Flash. Adorei! Tanto é que escrevi um breve post com o link para esta página, recomendando-o :)
    Abraços,
    Isabel

    Responder
  • Lecko Araujo comentou em

    eu to usando o chrome vou esse css q mandei é so a parte que determina o funcionamento do texto do destaque, vou enviar o estilo completo pra vc ve se pode me ajudar

    quando abro esta td ok, porem assim que o efeito de transição é aplicado, ele fica no topo da foto entende?

    por favor me ajuda to precisando muito desse codigo

    Responder
  • Lecko Araujo comentou em

    amigo baixei testei funcionou tudo normal, você esta de parabéns a muito tempo procuro um sistema q funcione tão bem assim e corresponda minhas expectativas.

    Mas a barra com o fundo e o texto do destaque, ta ficando no topo da imagem, assim que abro o arquivo fica tudo ok, porem depois que é aplicado o efeito, a barra com a legenda ou texto do destaque ta ficando logo abaixo da numeração dos destaques.

    verifiquei o css e esta tudo ok

    #destaques ul li div.fundo {
    background-color: #000000;
    background-position: ;
    bottom: 0px;
    filter: alpha(opacity = 80);
    height: 40px;
    left: 0px;
    opacity: 0.8;
    position: absolute;
    width: 500px;
    }

    #destaques ul li p {
    bottom: 0px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: bold;
    left: 0px;
    line-height: 20px;
    margin: 0px;
    padding: 10px 15px;
    position: absolute;
    width: 500px;

    e como ja disse assim que abro o index que baixei aqui ele aparece tudo normal, mas depois do efeito de transição, ele não se posiciona corretamente

    você pode me ajudar?

    Responder
  • Fernando Moreira Costa comentou em

    Baixado, testado e aprovado!
    Gostei muito, tah de parabéns! Vou usa-lo em meu site

    Obrigado!

    Responder
  • Aninha comentou em

    Olá! Adorei essa idéia! Gostaria de saber se nao tem como mudar o efeito de troca de imagem pra fade.

    Obrigada!

    Responder
  • Crystian comentou em

    Sim, eu fiz o select com a query_post, certo, mas o slide não funciona, como faço para incluir os scripts no tema. Tem que incluir no header, no index?

    Responder
  • Paulo Kampus comentou em

    Ricardo!

    Parabenizando vc mais uma vez por esta iniciativa em iluminar o caminho de muitos como eu que tem interesse em ingressar na área mas falta recursos para fazer um bom curso, quanto ao post Sistema de banners em slide com CSS e JCycle, fui um dos que entrou em contato contigo solicitando que vc explicasse como tinha implementado esse sistema em teu blog...botei pra funcionar ta tudo certinho...mas na hora de puxar as noticias do sistema wordpress...não dá...ilumina a gente ai como faz pra pegar as noticias do banco wordpress e coloca-las em forma de slides como no teu site/blog

    Grato
    Boma semana e sucesso pra vc!

    Responder

Deixe seu comentário