Slide Show com jQuery

Por David CHC em 03/04/2010 - 9:16 > 73.544 Visualizações > 224 comentários

Salve amigos do MxMasters, e nessa video aula iremos aprender a como criar um efeito de Slide Show utilizando o jQuery. Para isso eramos utilizar um plugin chamado Cycle, onde você terá uma gama de possibilidades de realizar vários efeitos. Foi com esse plugin foi criado o slide show do MxMasters. Boa Aula.

Site do jquery : http://jquery.com/

Site do Cycle : http://malsup.com/jquery/cycle/

Script criado na Video Aula

David CHC trabalha como free-lance em desenvolvimentos de sites,desde o projeto completo à parte do projeto. Tem conhecimentos em Padrões Web( xhtml, css), javascript( jquery), php, mysql , (iniciando no python e ruby também), photoshop, fireworks, corel draw, enfim, um eterno aprendiz...

Siga o autor no twitter: @davidchc | Site do Autor : www.davidchc.com.br

Siga o MX Masters no twitter e receba nossas atualizações: @mxmasters

http://www.mxmasters.com.br David CHC

Creio q dá para fazer, mais ai só consultando o manual do plugin

http://jquery.malsup.com/cycle/
Duda_buzzo

Olha Muito Bakana, vc não tem noção de como me ajudou!! Continue assim seu trabalho é excelente!!! Grata.

Eduarda
http://www.mxmasters.com.br David CHC

Q bom q pode te ajudar Eduarda.
http://www.mxmasters.com.br David CHC

Na Mesma maneira Geraldo, vc vai coloca os scripts no seu tema, e vai chamá-los a partir do seu tema. A maneira de fazer não vai mudar.
Anônimo

Muito bom….. valew! de uma ajuda muito grande!!!
Dalton Mendes

Parabens, excelente. Tudo conforme vc descreveu.

Obrigado
Ade Mb46

Olá David, muito boa a vídeo aula! Acompanhei na íntegra, mas só um reclame professor: não deu pra ver onde você adicionou a pager dentro do body, ficou oculto suas ações do mouser. Por favor, como você agiu? Criou nova div ou o que para id=pager?
http://www.mxmasters.com.br David CHC

Na epoca q fiz a videoaula, fazia o pecado deixar camtasia colocar os zoom automaticos, e ai tinha esses problemas. No caso foi criado uma nova div, e colocou o id#pager, no cycle defino q a paginação será nessa div.
http://www.mxmasters.com.br David CHC

Brayan, sim existe algumas maneira de fazer isso, uma delas é vc adicionar dentro da li a noticia, e com css posicionar

#slide li{ position:relative}

#slide li .noticia{ position:absolute; bottom :0; }
http://www.mxmasters.com.br David CHC

Q bom marcela, q a videoaula pode te ajudar.
Jonas Passos

Parabens!
otima video aula!
aprendi muito!
http://www.mxmasters.com.br David CHC

Basta englobar as imagens pelos links.
http://www.mxmasters.com.br David CHC

Daniel, recomendo vc dá uma olhada nas aulas de tableless, de como montar layout, pq assim vai ficar mais facil vc adaptar o conteudo dessa aula as suas necessidades
http://twitter.com/Igormiix igor palma

Como eu posso colocar as próprias imagens em miniatura ao invés de números no pager?
http://www.mxmasters.com.br David CHC

Pode sim, no proprio projeto do plugin tem um exemplo como fazer:

http://jquery.malsup.com/cycle/pager3.html
Erik

Cara, vc é perfeito, melhor videoaula que já vi, parabens e obrigado!
http://www.mxmasters.com.br David CHC

Vlw
Jean Marques

Olá, como faço para usar o feito como se fosse o background do site??
Eu fiz tudo ok, porém, todas as outras divs do meu site ficam por baixo do slide!!!!
eu gostaria que o slide ficasse por baixo!
Felipe Menezes

Tem como colocar um atrazo em um span para que ele apareça somente depois que o slide da imagem terninar….
http://www.mxmasters.com.br David CHC

Provavelmente isso, vc pode usar a propriedade after, e executar uma função :

http://www.malsup.com/jquery/cycle/options.html
Altair Jorge Fernandes

Dá uma olhada neste site, não encontrei nada sobre isso..

http://www.mob.ag/
Marco Túlio Lacerda

salvou minha vida tambem rsrsrs
agora posso ir la receber o serviço kkkkkkkkkk
http://www.mxmasters.com.br David CHC

Dá uma olhada nos feitos possiveis com o Cycle, que pode te ajudar a fazer esse efeito q vc quer:

http://jquery.malsup.com/cycle/more.html?v2.23
http://www.mxmasters.com.br David CHC

Dá uma olhada nos feitos possiveis com o Cycle, que pode te ajudar a fazer esse efeito q vc quer:

http://jquery.malsup.com/cycle/more.html?v2.23