Categorias
Padrão

Ótimos efeitos de transição de imagens em jQuery : Coin Slider

Navegando na internet, encontrei um site de um designer, russo se eu nao me engano, onde ele mostrava as imagens de seu portfólio com um lindo efeito de transição de imagens, que eu achava ser em flash.


Curioso ao ver que não era Flash, entrei no código fonte e encontrei a mágica: jQuery!

jQuery é uma biblioteca feita em JavaScript que é o bambambam dos webdesigners atualmente. Possui excelentes recursos que deixam seu site super atraente e sem deixar pesado como sites em Flash.

O nome do plugin é Coin Slider, e eu achei nesse site aqui, em inglês. Ótimo site por sinal, com vários post interessantes.

E como esse plugin foi útil pra mim, resolvi postar aqui no blog, que aliás está precisando de atualizações!

Então vamos ao que interessa.


Clique na imagem e veja uma página de demonstração do efeito.

Recursos

* Efeitos de transição únicos
* Compatível com Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
* Valid markup
* Configuração flexível
* Auto slide
* Barra de navegação
* Super leve (somente 8kb)
* Possibilidade de colocar links nas imagens
* Uso livre sob a licença do MI
* Totalmente customizável usando CSS

Download do plugin

Configuração

Faça o download do jQuery, do plugin Coin Slider e do arquivo CSS que está incluído no pacote do link acima e inclua tudo na seção <head> sua página:

<script type=”text/javascript” src=”jquery-1.4.2.js”></script>
<script type=”text/javascript” src=”coin-slider.min.js”></script>
<link rel=”stylesheet” href=”coin-slider-styles.css” type=”text/css” />

Crie uma div com o id “coin-slider” e coloque as imagens, os links e as descrições, seguindo o modelo abaixo:

<div id=’coin-slider’>
<a href=”img01_url” target=”_blank”>
<img src=’img01.jpg’ >
<span>Descrição para a imagem 1</span>
</a>

<a href=”img02_url” target=”_blank”>
<img src=’img02.jpg’ ><span>Descrição para a imagem 2</span>
</a>
</div>

Pode colocar quantas imagens desejar, não tem limite. A descrição e o link não são obrigatórios.

No final do seu arquivo, antes do </body>, insira o código abaixo:

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#coin-slider’).coinslider();
});
</script>

Exemplo

Este plugin possui várias opções para você configurar seu slider do jeito que você quiser. Se você quiser um slide de largura 900px, sem botões de navegação e com intervalo de 5 segundos entre as imagens, o código é o seguinte:

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>

Lista com todas as opções

width: 565, // largura do slider panel
height: 290, // altura do slider panel
spw: 7, // quadros por largura
sph: 5, // quadros por altura
delay: 3000, // intervalo de tempo entre as imagens, em milissegundos
sDelay: 30, // intervalo de tempo entre as imagens, em milissegundos
opacity: 0.7, // opacidade do título e da navegação
titleSpeed: 500, // velocidade de aparição do títuo em milissegundos
effect: ”, // random, swirl, rain, straight
navigation: true, // botões anterior e próximo
links : true, // mostrar links nas imagens
hoverPause: true // pausar a transição ao parar o mouse em cima da imagem

CUIDADO ao configurar o spw e sph porque se você colocar muitos quadros, a transição fica muito lenta e o site também. Aconteceu isso comigo! Então aconselho a não modificar os valores padrões.

Se você não setar o tipo de efeito, o padrão será random.

É isso aí, qualquer dúvida é só comentar.

Por Ralph Almeida

UI/UX Designer e front-end developer • Campinas/SP

Com formação acadêmica em TI e pós-graduado em Design Thinking

Focado em design de interfaces e experiência do usuário (UI/UX), tendo trabalhado com design de aplicativos mobile (iOS e Android), grandes sites, sistemas web e aplicações desktop.

119 respostas em “Ótimos efeitos de transição de imagens em jQuery : Coin Slider”

ola amigo tudu bem?!
adorei essa transiçao de imagens so q nao consigo colocar no site q estou fazendo..

1-nao consigo baixar o jquery, ai em cima ond vc pede para fazer o download dele..

2-duvida:
as divs ja posso colocar na pagina ou tem q ser antes do body tb^^ =D

pode me ajudar??
obrigado

muito bom o tuto. eu ja tava preparado pra mexer no spw e sph ai li o aviso de CUIDADO. hehehehe. por as minhas imgs serem menores ai os quadrados ficaram grandes. mas vlw

Não rola aqui. só mostra as imagens em sequencia. Porque? requer algum pluggin? Veja meu código:

Documento sem título

$(document).ready(function() {
$(‘#slide’).coinslider();
});

sinceramente não entendo por que meu código não funciona. Revisei ele inúmeras vezes. Refiz o tutorial do site orinigal e desse aqui. Elas ficam em sequencia, como se o navegador não conseguisse carregar o jQuery ou o plugin. Não sei. Raiva.

Consegui fazer funcionar, perdoem-me a ignorância, se houver, mas a unica coisa que eu fiz diferente do tutorial foi colocar o script

depois da antes da e também usei o JQuery 1.3.2… vlw

Olá, usei seu script e funcionou muito bem, obrigado. Só queria tirar uma dúvida… Na navegação ao invés de ter os quadradinhos com links pra todas as imagem tem como fazer uma navegação com estilo anterior – próximo (diferente da que tá dentro)??

Adorei o seu script, mas estou com um pequeno problema, eu vou usar as imagens como plano de fundo de um site.
Tem com eu usar width e o height em 100% para que as imagens fazem a transição independente da resolução do monitor?

Oi amigo. Muito bom o seu scrip. Parabéns.
Só que as minhas imagens só ficam no canto da tela. Como faço para deixá-las no meio?

Até salvei o seu código fonte e suas imagens para ver se dava certo e deu mesma coisa.

Obrigado

Olha só… maravilha este tutorial seu… funcionou perfeitamente.. só tem um ajuste que gostaria de fazer e não achei…. minha imagem tem 890 x 200 logo a descrição da imagem manteve o tamanho menor… aonde eu altero isso? fora isso ta tudo OK.
Parabéns pelo posto e pelo Blog.

Amigo, eu quero fazer este esquema do coin-slider, só que é o seguinte.. meu site tem um sistema de administração, onde os clientes montam o layout do jeito que querem… ai eles hospedam o banner em um banco de dados Mysql. A questão é o seguinte: Como carregar estas imagens do Mysql para este script? Por favor, me adiciona no msn.. preciso disso para ontem… seria ótimo se trocassemos uma idéia a respeito.. Muito obrigado des de já..

Gabriel.

Exelente! Porém eu não gostei dos efeitos de transição, queria algo mais simples, como o efeito FADE. Tentei fazer uma gambiarra no código para pegar ele do plugin cycle mas não consegui, alguém poderia me ajudar a colocar o efeito fade na transição das imagens?

ola, no download falta o arquivo “jquery-1.4.2.js” e possuiu um chamado, “coin-slider.js” até então não mensionado na explicação acima.

Por isso não funcionou… tentei renomear o arquivo para “jquery-1.4.2.js” mas também não funcionou… as imagens ficam paradas, uma abaixo da outra…

Você consegue me informar onde entro o arquivo que está faltando “jquery-1.4.2.js”

obrigado.

Rapha, primeiramente parabéns pelo site! Realmente muito útil e muito bem escrito! Tenho uma simples dúvida.

Fiz todos os passos e os banners estão funcionando com sucesso, mas o jquery acabou tirando o clique de outros botões do site e desconfigurou outros itens também. Será que tenho como apontar que o jquery apenas configure o banner e nada mais no meu site?

Obrigado!
Abs
Rodrigo

Olá Ralph, sendo que quando defino o tamanho na chamada do script:
$(‘#coin-slider’).coinslider({ width: 900, height: 290 }); ele configura apenas o tamanho da “tela” e não das imagens entendeu?!

Gostaria de enviar colocar uma imagem com tamanho 600 x 400 e que ela ficasse, mesmo que esticada de forma desigual, no tamanho de 500 x 350. Existe solução para este caso?

Olá Ralph, obrigado pelo rápido retorno, mas na verdade, o que está desconfigurando é o arquivo jquery abaixo:

Existe um jeito de eu falar que esse arquivo só configure o banner e não o restante do site??? Porque ele está indo antes do e está desconfigurando alguns botões e ações do site.

Abs
Rodrigo

Olá Ralph, obrigado pelo rápido retorno, mas na verdade, o que está desconfigurando é o arquivo jquery abaixo:

script type=”text/javascript” src=”jquery-1.4.2.js

Existe um jeito de eu falar que esse arquivo só configure o banner e não o restante do site??? Porque ele está indo antes do e está desconfigurando alguns botões e ações do site.
Abs
Rodrigo

Olá Ralph, obrigado pelo rápido retorno, mas na verdade, o que está desconfigurando é o arquivo jquery abaixo:
script type=”text/javascript” src=”jquery-1.4.2.js

Existe um jeito de eu falar que esse arquivo só configure o banner e não o restante do site??? Porque ele está indo antes do HEAD está desconfigurando alguns botões e ações do site.
Abs
Rodrigo

Então Rodrigo, aplicando o coinslider só no id, não tem pq ele estragar o resto. A não ser que vc esteja utilizando a mesma classe ou id do coinslider para outras coisas.

Ou então, tente fazer o seguinte, troque a ordem da chamada do script do coinslider

naum consigo centraliza mexer o slider eu fiz tudo baixei e tudo mais mais fico o slide na esquerda e o button no central o style naum funciona q baixei chamo ele mais nem responde pode ate apagar mexe nada nem modifica em nada

Ola Ralph, sou novo aqui e achei fabuloso o seu exemplo de slide, queria poder por um na pagina da minha igreja que estou fazendo. Pode me ajudar ?
Seque o link dela….
http://www.apostolofrancisco.com.br/index_new.html

No lugar onde tem uma imagem escrito “JUMP” quero por um slide…., este lugar e uma fatia do fireworks, posso por uma pagina independente…

Não entendi direito… só preciso do código html, posso alterar as imagens e postalas no lugar certo e tudo funciona ?
Preciso fazer alguma alteracao nos arquivos jquery e coin-slider ??

Te agradeço desde já …

Fica com DEUS !

Pow galera, alguém me dá uma luz, pelamor de deus…
To pelejando já faz umas duas horas e o negócio não dá certo, já até copiei o código fonte do exemplo e nada…
A página onde estou testando é:
htttp://www.nucleoestudo.ufla.br/nefor/teste
Me ajudem por favor.
Abraço

Consegui, raph…
Tinha mais umas coisas erradas, fui no seu exempo e copiei todo o código, aí deu certo…
Grande Abraço.
Obrigado!
PS: vc sabe se tem mais efeitos além daqueles listados?
(random, swirl, rain, straight)

Opa Ralph, cara, eu já fiz tudo bem direitinho, mas quando vou visualizar depois de pronto, fica uma imagem abaixo da outra.
Ajuda ai por favor 😉

Opa Raph, cara, eu já fiz tudo direitinho e tal, mas quando salvo e vou visualizar, fica uma imagem embaixo da outra sem nenhum slide, tem como me ajudar?
Olha só como que tá!

Untitled Document

descrição


descrição 2

$(document).ready(function() {
$(‘#coin-slider’).coinslider({ width: 950, navigation: false, delay: 5000 });
});

Nao entendi como fazer para centralizar tudo… tantos os quadradinhos como as imagens na pagina… e outra duvida…. quero os quadradinhos em baixo funcionando, mas nao gostaria de ter o next e prev… gostaria de tirar isso… Obrigado pela ajuda

Olá, obrigado por este belo tutorial, funcionou certinho, mas tenho uma duvida.
Tentei colocar aqueles botões quadrados de troca de imagem por cima dela. Alterei pelo CSS e consegui deixa-los em cima da imagem, mas agora eu não consigo clicar neles, alguma ajuda?

opa cara, blz?
estou tendo problemas para posicionar o div coin-slider.
Eu posiciono ele por css mas ele muda de tamanho e algumas partes dele não saem do lugar, fica muito estranho, queria saber como voce fez no exemplo que voce colocou.
Falow, abraço

como coloco o efeito como BACKGROUND para que dependendo da resolucao o banner fique sempre na tela toda.

Meu banner tem o tamanho de 1920px e qto a resolucao seja menor o banner continue no centro mas em tamanho menor.. pois preparei o mesmo para 1000px.

Aguardando uma ajuda

Quero usar esse script com + mysql mas me deparo com o seguinte problema.
Quando chamo a imagem no banco de dados ela fica reduzida, já usei estilizei no css e nada faz ficar do tamanho desejado.
Outro problema apresentado foi a imagem se repetir, já consegui corrigir editando os scripts inserindo
‘background-repeat’: ‘no-repeat’,.
Em outros scripts como jcarousel e easySlider, consigo trabalhar com Banco dados normalmente, se alguém puder me ajudar, agradeço.

O erro está nesse link http://cfcvitoria.com/site/teste.php

Olá, eu tenho uma imagem com tamanho de 500 x 400 e eu quero q essa imagem apareça em 300 x 200.
O quadro q fica a imagem ta 300 x 200 tudo certo, mas a imagem q vai dentro ta maior, como se estivesse com zoom.
Meu código:

Descrição para a imagem 1

Descrição para a imagem 2

$(“#coin-slider”).coinslider({ width: 300, height: 200, navigation: false, delay: 2000 });

Há um tempinho eu estou procurando como colocar esse efeito e não conseguia. Aí achei esse post simplesmente sensacional! PERFEITO![

Consegui e meu projeto está ficando maravilhoso!

olá, não estou conseguindo rodar o plugin em outro navegador que não seja o chrome!

o que posso fazer pra rodar no IE e Mozilla?

Muito obrigado!!

bom dia, estou precisando mudar o nome dos bõtoes (Next/prev) para o português ou por imagens de setas, como faço isso, não conseguir achar dentro dos códigos enviados. Grato

bom dia estou com a mesma duvida do amigo la em cima estou com a galeria funcionando perfeitamente só que a imagem fica maior que o tamanho do quadrado que eu determinei para o slider como eu faço para que a imagem fique do tamanho do slide?

Boa noite, estou tentando seguir o tutorial? Meu código não funciona de maneira alguma, no código ele chama um arquivo chamado “jquery-1.4.2.js” porém nos arquivos para download não tem nenhum com esse nome. Oque faço?
Fico no aguardo, obrigado!

Deixe uma resposta

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