Como criar um slide de imagens com Jquery

Tempo de leitura: 8 minutos

Um efeito que todo mundo acha bacana e que muita gente tenta fazer e replicar em seus respectivos projetos é o slide de imagens.

No artigo de hoje pretendo mostrar a criação de um slideshow utilizando o framework Jquery. Para quem ainda não sabe do que se trata esse tal de Jquery, recomendo a leitura do artigo abaixo:

>> O que é Jquery e como funciona? <<

Basicamente, o artigo de hoje será dividido em três etapas.

A primeira consiste na estruturação do HMTL, a segunda diz respeito ao CSS e por último faremos a chamada do Jquery e do Java Script.

Antes de darmos continuidade ao tutorial, veja no link abaixo um exemplo online desse slideshow:

>> Link do slideshow <<

como criar um slide de imagens com jquery

# 01 Etapa – O HTML

Na primeira etapa iremos estruturar nosso HTML para receber o efeito em questão. O primeiro passo aqui é criar uma DIV com o ID que você preferir e dentro dessa DIV criaremos uma lista não ordenada.

 

<div id="imagens">

	<ul>
    	<li>
        	<img src="imagem01.jpg" alt="imagem01" title="imagem01" width="600" height="300" />
        </li>

        <li>
        	<img src="imagem02.jpg" alt="imagem02" title="imagem02" width="600" height="300" />
       	</li>

        <li>
        	<img src="imagem03.jpg" alt="imagem03" title="imagem03" width="600" height="300" />

        </li>

    </ul>
</div><!--FIM DIV IMAGENS-->

 

Como vocês podem observar, criamos uma DIV com ID imagens e posteriormente criamos uma  lista não ordenada com as imagens que serão utilizadas no slideshow.

Feito isso, criaremos agora  um paginador de imagens para esse slide.

 

<div id="imagens">

	<ul>
    	<li>
        	<img src="imagem01.jpg" alt="imagem01" title="imagem01" width="600" height="300" />
        </li>

        <li>
        	<img src="imagem02.jpg" alt="imagem02" title="imagem02" width="600" height="300" />
       	</li>

        <li>
        	<img src="imagem03.jpg" alt="imagem03" title="imagem03" width="600" height="300" />

        </li>

    </ul>

	<div class="pag">
    	<a href="#" id="ant">anterior</a>
        <span id="pager"></span>
        <a href="#" id="prox">próximo</a>
    </div><!--FIM DIV PAG-->

</div><!--FIM DIV IMAGENS-->

Como vocês podem ver, adicionamos mais uma DIV para servir de base para nosso paginador. Com isso, nosso HTML já está terminado, ou seja, essa é a estrutura básica para a criação de um slide de imagens. Partamos agora para o estilo do nosso slide.

# 02 Etapa – O CSS

Na segunda etapa utilizaremos as folhas de estilo para dar forma e vida ao nosso slide.

 

<style>

*{margin:0;padding:0}
#imagens{margin:0 auto;border:2px solid #CCC;padding:10px;width:600px; height:300px;margin-top:50px;border-radius:5px;}
#imagens ul{margin:0;padding:0;list-style:none}
#imagens .pag{margin:20px 0 0 0}

</style>

Nesse trecho de código ( que deve ser colocado antes do fechamento do </head> ) adicionamos alguns efeitos em nossa DIV imagens, no intuito de melhorar a visualização das imagens.

OBS: Se você possui dificuldades em entender HTML ou/e CSS, recomendo dar uma olhada nesse material de extrema qualidade:

>> E-book Fluência em HTML e CSS<<

Se quiser algo mais mastigado e que de fato te transforme em um verdadeiro profissional web, recomendo o curso HTML e CSS do básico ao avançado de minha autoria.

Com isso terminamos nossa  segunda etapa, partamos para a terceira e última.

# 03 Etapa – O Jquery

Nessa etapa precisaremos apenas de duas coisas:

A versão 1.10.2 do Jquery. Você deve estar se perguntando, “Ah, Wilker, já temos ai no mercado a versão 3.1.1 do Jquery (26/01/2017), por quê então estamos trabalhando com a versão mais antiga?“.

Bom, na data de criação desse material (02/10/2013), eu utilizei a versão recomendada, ou seja, a 1.10.2. Portanto, pode e provavelmente vai acontecer algum erro se você utilizar as últimas versões da forma como eu mostro nesse tutorial.

Não se preocupe em procurar essa versão mais antiga, eu fiz questão de salva-la e hospeda-la em um servidor externo para que você possa baixar-la e utilizar-la em seu projeto.

>> Baixar a versão 1.10.2 do Jquery <<

OBS: Outra coisa importante é que eu gravei uma aula exclusiva mostrando como criar o mesmo slide nas versões mais recentes do Jquery, assim, você não precisa ficar preso ao passado ok? Segue a aula com exclusividade:

E a segunda coisa é a última versão do plugin Jcycle para Jquery.

>> Baixar Jcycle <<

O Jcycle é o plugin responsável pelo slideshow, ou seja, sem ele o slide não irá funcionar corretamente.

Depois de ter feito o download dos dois arquivos, basta agora inclui-los na sua página.

 

<head>

<script type="text/javascript" src="pasta/jquery.js"></script>
<script type="text/javascript" src="pasta/jcycle.js"></script>

</head>

Qualquer dúvida sobre a instalação, assista o vídeo abaixo:

Lembrando que arquivos com extensão .JS e .CSS devem sempre está referenciados antes do fechamento do cabeçalho HTML, ou seja, antes da TAG </head>.

Se tudo correr bem, seu site já estará rodando Jquery em conjunto com o plugin Jcycle. Mas isso ainda não é o suficiente para fazer seu slide funcionar.

O próximo passo é você criar uma função em Java script que será a responsável pelo efeito em questão.

 

<script type="text/javascript">
	$(function(){
		$('#imagens ul').cycle({
			fx: 'fade',
			speed: 2000,
			timeout: 5000,
			next: '#prox',
			prev: '#ant',
			pager: '#pager'
		})
	})
</script>

 

Como vocês podem observar, essa função pode parecer meio complexa para os iniciantes, porém informo para vocês que poderia ser muito pior, até por que se você fosse fazer um slideshow utilizando somente o Java Script, pode ter certeza que teria que utilizar enormes blocos de código para tal fim.

Mas deixando de conversa, vamos a explicação para cada comando dessa função:

$(‘#imagens ul’).cycle => Esse comando serve para informar ao Jcycle qual elemento HTML ele irá atacar, ou seja, aquele elemento que possui as imagens do slide, no nosso caso as imagens estão em uma lista não ordenada dentro de uma DIV chamada imagens.

fx => Esse comando indica o efeito de transição do slide. No nosso caso estamos fazendo uso do efeito fade, mas você pode modifica-lo ao seu gosto. No site do Jcycle você poderá visualizar diversos exemplos de efeitos que você pode aplicar nos seus projetos.

speed, timeout => O Speed e o timeout são responsáveis pela velocidade de transição das imagens. Você pode aumentar ou diminuir esses valores.

next, prev, pager => O next, prev e pager são os responsáveis pela paginação das imagens. Eles controlam os seletores HTML responsáveis.

Esses são os comandos básicos para o funcionamento correto do slide. Lembrando que essa função deve está localizada antes do fechamento do </head>.

Se você seguiu corretamente todos esses passos, você terá um slide igual do exemplo mostrado no inicio do artigo com efeito fade e paginadores.

Se o seu slide estiver funcionando corretamente, este artigo chega ao seu fim, mas se você ainda não conseguiu configura-lo corretamente eu criei um vídeo exclusivo mostrando o passo a passo de como criar e deixar seu slide de imagens funcionando devidamente.

Você pode conferir o vídeo logo abaixo:

Se você gostou do tutorial ou se lhe foi útil, peço que deixe seu feed back, será bastante importante pra mim e para outros profissionais que estão ingressando nessa carreira.

Novamente, se você deseja refazer o seu slide com as versões mais atuais do Jquery, basta apenas assistir a aula abaixo:

No mais, um forte abraço e até a próxima!

Pegue o Seu Bônus…

Não teve tempo para ler todas as informações contidas nesse artigo? Ou talvez queira salvar esse conteúdo em seus favoritos?

De qualquer forma, criei uma versão em PDF desse artigo que você pode baixar e salvar em seu computador.

10 Comentários

  1. David

    Ola é o David do Yahoo! Eu não quero criar slide de imagens eu quero é fazer slide
    para links.Tipo assim eu clico no link e a pagina desliza para o lado

    Responder
  2. Cristiano

    Ola amigo, parabéns pela publicação, funcionou perfeito no site, gostaria de saber qual procedimento devo adotar para incluir uma classe nos links de paginador, principalmente onde tem os números dos slides.

    Responder
    1. wilker

      Boa tarde Cristiano,

      Basta vc atacar no CSS, essa parte do código:

      Vc pode adicionar uma nova class ou trabalhar esse ID=”pager” no CSS.

      Responder


  3. Marconde

    Ola wilker, otima postagem. Estou com um pequeno problema, na exibição das imagens eu tenho 6 imagens e na exibição da primeira e quarta imagem ha um espaçamento de 20px no topo deslocando elas da uma div. As outras imagens executam normalmente dentro da div, sendo que todas elas sao do mesmo tamanho e extensão. Ja fix varias configurações css e nada. aparentemente acredito que seja um erro no jquery cycle pois nao consegui baixar no link que vc deixou, baixei de outra fonte. Sem falar que no fx se eu colocar o efeito “all” no lugar do “fade” as transiçoes sao exibidas de formas distorcidas diferentes do seu video. Agradeço se puder ajudar.

    Responder
  4. marconde

    Ola wilker, otima postagem. Estou com um pequeno problema, na exibição das imagens eu tenho 6 imagens e na exibição da primeira e quarta imagem ha um espaçamento de 20px no topo deslocando elas da uma div. As outras imagens executam normalmente dentro da div, sendo que todas elas sao do mesmo tamanho e extensão. Ja fix varias configurações css e nada. Sem falar que no fx se eu colocar o efeito “all” no lugar do “fade” as transiçoes sao exibidas de formas distorcidas diferentes do seu video. Agradeço se puder ajudar.

    Responder

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *