Como criar um slide de imagens com Jquery

Compartilhamentos

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.

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.

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.

RECEBA NOSSO CURSO GRATUITO

Insira seu e-mail abaixo para garantir acesso grátis ao nosso curso de HTML em 30 dias!

 

<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!

 

Sobre o Autor Wilker Costa

Estudante de computação e apaixonado por empreendedorismo. Desde cedo buscando sempre inovar e trazer as melhores soluções para seus clientes. Escreve regularmente sobre marketing digital e acredita que esse é o caminho para a liberdade financeira e para a construção de uma sociedade mais empreendedora!

Siga-me::
>

Que Tal Aprender a  criar um blog igual a esse?