SlideShow Simples com Jquery e Cycle

Neste tutorial vou mostrar como criar um slideshow simples utilizando Jquery juntamente com o plugin cycle para criarmos um slideshow simples, porém bem legal de aplicar em seus trabalhos.

Por Programação Pular para comentários
SlideShow Simples com Jquery e Cycle

Neste tutorial vou mostrar como criar um slideshow simples utilizando Jquery juntamente com o plugin cycle para criarmos um slideshow simples, porém bem legal de aplicar em seus trabalhos.

Se quiseres, podes baixar a o slideshow que criei e utilizar os arquivos para seguir o tutorial. Clique aqui.

Vamos ao tutorial!

Primeiro você deve ter o jquery na pasta onde você esta desenvolvendo o seu trabalho (ou então dentro de uma subpasta ou dentro de arquivo qualquer chamado por include). Para baixar o jquery acesse o site: jquery.com.

Segundo passo é baixar o plugin Cycle. Para isso acesse o site jquery.malsup.com, faça o download do plugin e coloque-o na pasta onde você está desenvolvendo seu trabalho.

Também baixei 5 imagens que irei utilizar no tutorial. Agora crie um documento html, salve-o e dê um nome a ele. Abaixo da tag title adicione a tag que chamará o jquery.js. veja:



Em seguida, abaixo da tag que chama o jquery.js, vamos adicionar a tag que chama o cycle.js.



Agora, abaixo das tags que chamam o jquery.js e cycle.js vamos adicionar a função que faz o cycle funcionar. Veja:



O ID #slideshow fica o bloco onde conterá as imagens que irão compor o nosso slideshow. Nesse casso, podemos adicionar o id #slideshow em uma DIV. É exatamente isso que iremos fazer. Veja:



Como você pode imaginar, essa ID pode ser formatada em CSS. Essa parte é com você. Então, vamos adicionar as imagens dentro da div que criamos. Veja:

SlideShow Simples com Jquery e Cycle SlideShow Simples com Jquery e Cycle SlideShow Simples com Jquery e Cycle SlideShow Simples com Jquery e Cycle SlideShow Simples com Jquery e Cycle



Só isso. Simples, não é mesmo? Agora é so estilizar seu slideshow com css. O uso basicamente do Cycle é assim, se você quiser você pode procurar aprender mais sobre este plugin, pois tem várias outras formas de personalizar o seu slideshow.

Compartilhe com seus amigos:
Mais sobre: cycle, jquery, javascript
Marciano Dias
Marciano Dias Desde de 2009 trabalho como WebDesigner Freelancer.
FACEBOOK // TWITTER: @marcianodias
Quer conversar com o(a) Marciano, comente:
Carregar comentários
Últimas notícias de Programação
  • Google usa Mulher-Maravilha para ajudar meninas a programar

    Google usa Mulher-Maravilha para ajudar meninas a programar

    Meninas ganham um incentivo extra na hora de aprender a programar, a Mulher-Maravilha.

  • Criando um cadastro de usuário em Java

    Criando um cadastro de usuário em Java

    O objetivo deste artigo é desenvolver uma aplicação em JSE (Java Standard Edition) de inserção de dados utilizando alguns padrões de projeto.

  • Quer aprender PHP? Saiba mais

    Quer aprender PHP? Saiba mais

    Chegou o tão aguardado curso online de PHP do Oficina da Net. Você não pode perder. PHP é uma das linguagens mais usadas no mundo. Os conteúdos que vou mostrar no curso, são exatamente o que você precisa saber para iniciar sua carreira como programador.

  • Formulário de contato em php

    Formulário de contato em php

    Guia do PHP: Aprenda a fazer um formulário em PHP que envia via SMTP autenticado o e-mail para um destinatário.

  • Como fazer um GIF?

    Como fazer um GIF?

    Aprenda a criar um GIF animado de vídeos. Descubra como criar os GIFs, imagens animadas que você vê em na internet.

  • O que priorizar na hora de escolher o hosting para seu site?

    O que priorizar na hora de escolher o hosting para seu site?

    Com o crescimento das ofertas na web, saiba o que você deve levar em consideração na hora de escolher a melhor empresa de hosting para seu empreendimento

  • O que preciso fazer para criar um aplicativo?

    O que preciso fazer para criar um aplicativo?

    Temos visto que desenvolver aplicativos que visam o mercado mobile pode ser mais que uma alternativa rentável, pode colocá-lo no topo, deixá-lo rico. Mas nem tudo são flores, e o aspirante a desenvolvedor de app precisa seguir algumas regras.

  • WEBINAR 3.9

    WEBINAR 3.9

    Venha para o Maker e descubra como tornar o seu negócio mais competitivo.