Criando carrosel de notícias com JQuery

  • Publicado em: 07/03/2011
  • Revisado em: 13/10/2012
  • Categoria(s)Ajax | Jquery
  • Autor: Rodolfo
  • Newsletter: Inscreva-se

Nesta sequência de 3 vídeo aulas nosso colega Rodolfo irá ensinar como criar um carrossel de notícias usado JQuery. Serão abordados assuntos como herança de CSS, formas de evitar conflitos com outros plugins JQuery, correção de erros de carregamento e como fazer este carrossel funcionar em todos os navegadores, desde o pré-histórico IE6 até o Google Chrome da atualidade.

Confira a primeira aula:

Dando sequência veremos alguma funções do JCarrouselLite e como usar o Easing que é um complemento do JCarrouselLite usado para melhorar a aparência do carrossel. Segue a aula:

Em nossa terceira aula é hora de concluir nosso carrossel, mãos a obra, ou melhor mãos ao código:

Em breve serão disponibilizados os códigos criados na aula, aguardem...

Compartilhe esse post:
Conteúdo relacionado

Sobre o autor

Rodolfo

Nascido em Barra Bonita Interior de São Paulo, aprendi tudo que sei sobre Web através de sites e fóruns, atualmente venho trabalhando com CMS como Joomla, Wordpress e Drupal. Também possuo conhecimento em padrões web como XHTML , CSS e PHP para CMS.

Comentários

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

  • Ricardo Aragão comentou em

    Bom dia, Rodolfo!!
    Gostaria de saber como criar um Carrosel fazendo com que ele busque as três ultimas noticias inseridas em um banco de dados Mysql.
    Esse que você criou as noticias são inseridas diretamente no código.
    Agradeço a colaboração.

    Responder
  • jonathan Gomes comentou em

    tenho um sistema de noticias em php que recebe os dados de um banco de dados na primeira video aula eu fiz tudo certinho mais o que acontece( funcao.js desativado aparece as noticias uma abaixo da outra quando eu ativo o funcao.js aparace a primeira mais o resto quando aperto ou coloco o auto e speed nao aparece as noticias meu codigo esta assim

    tambem o botão inferior nao aparece o que faço para resolver o problema

    Responder
  • Rodolfo comentou em

    Olá @Gabriel Bernardo pelo que entendi isso me parece ser problemas com FLOAT, quando você for usar float no carrossel não flutue o P porque senão ele vai ficar abaixo da imagem, use o float na imagem pra que a mesma force o texto a descer ou ficar abaixo dela conforme o tamanho da div abraços...

    Responder
  • Gabriel Bernardo comentou em

    Rodolfo, meu carrossel está funcionando normalmente, com apenas um probleminha: apenas as imagens entram no carrossel. O texto fica escondido embaixo da imagem, não aparece! Alguma ideia do que pode ser?

    Responder
  • Wagner Gilberto comentou em

    Baixei as vídeo aulas, parabéns pelo conteudo e forma simples de explicar, continue assim

    Responder
  • anderson clayton comentou em

    esses complementos é que fazem uma diferença brutal no acabamento do blog. parabens a quem produziu.

    Responder
  • Crystian Lima comentou em

    Muito legal Rodolfo, gostei desse efeito que da uma porrada quando passa o slide. Muito legal, parabéns ao Ricardo e ao Rodolfo!

    Responder
  • fabio comentou em

    Boa video aula... parabéns!
    Rodolfo, uma pergunta, colocando isso em um site ou blog feito em wordpress, tem condição de ele pegar as noticias automática, para exibir? Como o lup do wordpress que nós postamos a noticia e ele exibe outomatica quantas quiser-mos. E se usarmos a funções showpost tertermiamos a quantidade de post a ser exibido endendeu? Teria como fazer isso com esse plugn, tipo colocar ele pra exibir os ultimos 3 post exeto o primeiro?
    Como seria isso....
    Obrigado e no aguardo

    Responder

Deixe seu comentário

Pesquisar no site
Central do assinante

Esqueceu sua senha?

Hospedagem de sites

© 2008-2023 - RBTech.info | Todos os direitos reservados | Hospedado por Innova Host

É proibida a reprodução total ou parcial de qualquer conteúdo deste site.