30 ago Ó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.
diego fuzatto
Posted at 14:31h, 17 setembroola 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
Ralph Almeida
Posted at 10:33h, 30 setembroolá, o jquery vc pode fazer o download em http://www.jquery.com
as divs sao dentro do body!
abraços
Yuri
Posted at 09:57h, 30 setembroValew ae Ralph…. muito legal esse post…
valew
abç
felipe
Posted at 08:41h, 26 outubromuito 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
Paulo
Posted at 10:34h, 31 outubroNã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();
});
Ralph Almeida
Posted at 10:03h, 08 novembroOlá Paulo, qual versão do jquery vc está usando?
o diego disse que nao funcionou com a versão 1.4. tente usar a 1.3.2, pois é a q eu uso tambem.
abraços
diegocrusius
Posted at 09:31h, 08 novembrosinceramente 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.
diegocrusius
Posted at 09:41h, 08 novembroNão funciona com jquery 1.4. Testei no 1.3.2 e funcionou.
Rene
Posted at 05:58h, 06 dezembroBaixei a versão JQuery 1.3.2 e não funcionou tb… por que será?
Rene
Posted at 08:08h, 06 dezembroConsegui 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
Luciana
Posted at 20:05h, 26 janeiroMuito bom! Obrigada por disponibilizar e ensinar 🙂 Funcionou perfeitamente na versão 1.4.2 do jQuery.
Otávio Piazzi
Posted at 15:51h, 27 janeironossa, top demais e funcionou com o 1.4.4
Alberto Jr
Posted at 11:45h, 10 fevereiroOs “quadradinhos” do menu estão centralizados e as imagens à esquerda. Como centralizo tudo??? Valeuuuuu
Ralph Almeida
Posted at 04:02h, 09 maioVeja se colocou o tamanho exato da imagem na chamada do script no rodape.
Rafael
Posted at 04:54h, 31 marçoRalph otimo post.
Muito bom consegui fazelo rodar.
mas quando jogo no site ele nao carrega os scripts.
funcionou com o pluglin 1.4.2
Luiz Mattioli - [GODO]
Posted at 10:33h, 12 abrilMUITO OBRIGADO! DEU CERTO AQUI COM O 1.3.2.min.js
Não estava dando certo o script final, dai eu copiei do código de fonte da página de demonstração.
ótimo mesmo, valeu! abs
Elton
Posted at 17:38h, 07 maioPosso usá-lo em um site que eu estou desenvolvendo e vou comercializar?
Ralph Almeida
Posted at 04:01h, 09 maioOla Elton, pode sim, sem problemas. Só deixe os comentarios dos arquivos js intactos pra dar os creditos pra pessoa que fez.
Guilherme
Posted at 19:04h, 11 maioEstou tentando trocar o next e Prev por imagens. Basta trocar no css?
Não ta funcionando… (talvez seja burrice minha)
Celso
Posted at 08:08h, 12 maioOlá, 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)??
Teo Anderson
Posted at 22:34h, 13 maioFunciona no blogger/blogspot???
Ricardo
Posted at 16:57h, 14 junhoCara, foi uma mão na roda esse script, o mais prático que já vi, serve como swap image e gallery.
thanks brother.
Abs.
Prof. Baco
Posted at 14:17h, 04 agostoAdorei 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?
Ralph Almeida
Posted at 09:21h, 05 agostohum isso complica pois vai ficar distorcendo a imagem. eu ja fiz com a imagem em background do site, ai fiz imagens grandes, veja: http://www.wernerolegariomaciel.com.br/novo
o site ainda está em construção, por isso esta nesse dominio /novo
mauricio
Posted at 08:55h, 05 agostomuito bom estava procurando um diferente para colocar num site de cliente
Robson
Posted at 10:54h, 30 agostoOi 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
Ralph Almeida
Posted at 15:37h, 11 setembropara centralizar, coloque uma div com o seguinte css: defina um tamanho no width e use margin:0 auto;
Guilherme
Posted at 13:52h, 09 setembroNão consegui abrir o arquivo, o que fasso?
Ralph Almeida
Posted at 15:36h, 11 setembroo arquivo está zipado. baixa o WinRAR para descompactar esse arquivo.
Guilherme
Posted at 13:52h, 09 setembroTipo, o jquery, não sei fazer o download
Ralph Almeida
Posted at 15:35h, 11 setembroGuilherme baixa o jquery nesse site http://jquery.com/
Valmor Seabra
Posted at 21:04h, 14 setembroOlha 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.
Ralph Almeida
Posted at 03:44h, 15 setembroOlá Valmor, vc altera o tamanho na chamada do script:
Washington
Posted at 12:10h, 17 setembroMuito bom post, parabéns.
Rodrigo
Posted at 09:09h, 03 outubroOlá, eu tenho um blog ( Blogger ) e queria saber se consigo colocar esse efeito e se o procedimeno é o mesmo. Obrigado
Ralph Almeida
Posted at 08:40h, 03 novembroOlá, nao tenho certeza, mas acho que dá sim.
Uma sugestão, use o wordpress, é bem melhor!
Rodrigo
Posted at 13:04h, 03 outubroColoquei mas as imagens ficarão uma embaixo da outra.
Ralph Almeida
Posted at 17:04h, 07 dezembroOla Rodrigo, isso acontece geralmente quando o caminho do script e do css estao errados. De uma verificada 😉
Thiago Henrique
Posted at 08:30h, 03 novembroestou com problemas ao colocar o plugin fiz tudo como no tuto ai na hora que abre a pagina esta dando um erro
entre no site http://gtecinformatica.net/teste-slider.php que vai aparecer o erro
Gabriel
Posted at 18:36h, 14 novembroAmigo, 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.
Ralph Almeida
Posted at 03:52h, 17 novembroolá gabriel, faça o looping dentro da div do coin-slider:
?>
Dikson
Posted at 04:13h, 03 janeiroColoquei aqui mais as imagens ficam grandes uma em baixo da outra. Alguem pode me ajudar ?
Ralph Almeida
Posted at 04:15h, 03 janeiroOla Dikson, isso acontece geralmente quando o caminho do script e do css estao errados. De uma verificada 😉
Dikson
Posted at 06:44h, 03 janeiroOla Ralph, valeu pela dica conseguir aqui um abraço!!!! É muito massa!!
agora vou implementar no portal da empresa
Henrique
Posted at 05:04h, 05 janeiroFiz aqui com a versão mais atual do jQuery e funcionou perfeitamente! Muito obrigado pelo tutorial amigo! Sucessos com o site 😀
Higor Oliveira
Posted at 17:07h, 23 janeiroCara, excelente! Estou iniciando por conta própria em javascript e esse tuto era tudo que eu precisava!
ERLEY
Posted at 18:46h, 04 fevereiroRapaz, não consigo fazer funcionar de jeito nenhum.
wdlazaro
Posted at 08:13h, 22 fevereiroExelente! 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?
Ralph Almeida
Posted at 14:16h, 22 fevereiroOpa, coloque o spw e sph com valores 1, ai vai aparecer o efeito fade.
daniel
Posted at 00:50h, 24 fevereiroola, 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.
Ralph Almeida
Posted at 02:54h, 24 fevereiroOlá, o arquivo do jquery vc encontra para download em http://www.jquery.com
Ilo Soares Barbosa
Posted at 11:05h, 08 marçoPessoal, quando vocês copiam e colam o código direto daqui da página e colam no seu editor os Aspas simples e duplo tem que ser trocados senão não vai funcionar, essa é a causa de muitos reclamarem que não funciona. vejam o exemplo: (
), os aspas devem ser trocados para, (
). Valeu.
ackeley
Posted at 23:00h, 07 abrilnao consigo aumentar o tamanho altura das imagens pq?
Ralph Almeida
Posted at 13:50h, 14 maioOlá, defina o tamanho na chamada do script
$(‘#coin-slider’).coinslider({ width: 900, height: 290 });
Billy Gilman
Posted at 19:55h, 16 abrilhttp://code.google.com/p/jqueryjs/downloads/list
Pacífico
Posted at 16:10h, 29 abrilAmigo, estou brigando para alterar o posicionamento da imagem, pois não quero ele no topo.
Já alterei o css, só que não alterou nada.
Help-me!
Ralph Almeida
Posted at 13:49h, 14 maioAplique o css na id do objeto, no caso #coin-slider { }
Orlando
Posted at 14:24h, 11 maioRalph .. ela não funciona com a versão atual do jquery … Daniel, pega essa aqui, que esta neste mesmo site vai o link
http://www.ralphalmeida.com/wp-content/uploads/2010/08/coin-slider/jquery-1.3.2.min.js
salva como jquery-1.3.2.min.js e tenha certeza de colocar a referência certa para puxar la .. abs ..
Ralph Almeida
Posted at 13:49h, 14 maioObrigado Orlando, na época não tinha essa versão nova e acabei não testando.
Rodrigo
Posted at 07:33h, 12 maioRapha, 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
Ralph Almeida
Posted at 13:48h, 14 maioOlá Rodrigo, obrigado pelo elogio.
Quando vc faz a chamada do script, ele só pega o objeto que tiver o id que vc mencionou, que no caso é a div com id=’coin-slider’
$(‘#coin-slider’).coinslider();
Filipe Mantoan
Posted at 12:38h, 14 maioOlá, gostaria de saber como faço para fixar um padrão para o tamanho das imagens. Alguém poderia me ajudar?
Ralph Almeida
Posted at 13:47h, 14 maioOlá Filipe, defina o tamanho na chamada do script:
$(‘#coin-slider’).coinslider({ width: 900, height: 290 });
Filipe Mantoan
Posted at 10:07h, 15 maioOlá 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?
Ralph Almeida
Posted at 11:15h, 15 maioAh, aí você pode forçar na tag < img >
< img src=’img01.jpg’ width='500' height='350' >
Filipe Mantoan
Posted at 10:22h, 16 maioOlá Ralph Almeida,
Mesmo forçando na tag não funciona. Teria outra alternativa?
Rodrigo
Posted at 05:56h, 19 maioOlá 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
Rodrigo
Posted at 05:56h, 19 maioOlá 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
Rodrigo
Posted at 06:10h, 19 maioOlá 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
Ralph Almeida
Posted at 12:04h, 21 maioEntã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
Bulls
Posted at 11:49h, 21 maioTop o post!
abração fera!
Filipe Mantoan
Posted at 03:07h, 22 maioOlá Ralph, mesmo forçando na tag não funciona em relação ao tamanho. Teria outra alternativa?
Valeu pela força!
Ralph Almeida
Posted at 03:21h, 22 maioFilipe, pode postar seu código por favor ou entao me dar o link da página para eu ver.
Filipe Mantoan
Posted at 03:52h, 22 maioOlá Ralph,
Segue código abaixo:
titulo
Mesmo assim ele não redimensiona a imagem.
Ralph Almeida
Posted at 08:31h, 22 maioUé, cade a tag de imagem? Coloca assim
< a href="link" rel="nofollow" > < img src='caminho' width='200' height='100' />
titulo< /a >
loislane
Posted at 14:19h, 24 maioTô tentando colocar mas não da certo, tipo eu baixo os treco tudo certo, faço tudo certo e não vai…
yccki
Posted at 16:49h, 24 maionaum 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
Fabio Teodosio
Posted at 14:50h, 26 maioOla 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 !
Odair
Posted at 18:13h, 04 junhoParabéns, cara ótimo post, ganhei a noite =D
Gilmar Oliveira
Posted at 16:19h, 06 junhoCara vlw ficou bom e tudo, eu Só não consegui mudar a cor da fonte da descrição, pode me dizer onde posso mudar a cor e o padding?
vlw, e pode continuar a postar gostei.
abs.
Gilmar
Lucas Carvalho
Posted at 17:11h, 12 junhomuito bem, usei em muitos sites.
uso a verção 1.7.2 do jquery, eu só mudei isso
e ficou perfeito!
Parabens!!!
e muito obrigado!
Pedro Henrique
Posted at 10:52h, 28 junhoAmigo coloquei e funcionou perfeitamente, só um detalhe que esta me dando dor de cabeça. aqui no seu tb acontece isso a primeira imagem só aparece a metade. sabe me explicar oque acontece e com resolver ? Obrigado aoa amigos
Yuri
Posted at 11:27h, 19 julhoPow 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
Ralph Almeida
Posted at 08:22h, 20 julhoYuri, o link que vc mandou não funciona. Manda o correto para eu lhe ajudar.
Abraços
Yuri
Posted at 14:51h, 20 julhoRaph, segue o link correto.
http://www.nucleoestudo.ufla.br/nefor/teste.htm
Obrigado
Ralph Almeida
Posted at 16:06h, 22 julhoYuri, o caminho do arquivo do jquery está incorreto, ou vc esqueceu de colocar o arquivo na pasta. tenta ai!
Yuri
Posted at 17:20h, 22 julhoConsegui, 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)
Ralph Almeida
Posted at 03:19h, 23 julhoOpa que bom que conseguiu =)
Então, esse plugin só tem esses efeitos mesmo. Já estou preparando um post com outro plugin de imagens, q tem vários outros efeitos.
Abraços
Lucas
Posted at 12:45h, 24 julhoOpa 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 😉
Lucas
Posted at 14:56h, 24 julhoOpa 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 });
});
Ralph Almeida
Posted at 10:57h, 27 julhoOpa Lucas, poe o link da página para eu ver como está. Fica mais facil para te ajudar e ver o problema.
Nina
Posted at 09:07h, 27 agostoSgui esses passos, mas quando coloco as imagens, elas ficam uma em cima da outra e não tem efeito. Onde esta meu erro?!
Ralph Almeida
Posted at 11:18h, 19 setembroOla Nina, confere os caminhos dos arquivos jquery e do script, geralmente é isso.
Marcos
Posted at 13:05h, 04 setembroNao 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
Cleber
Posted at 07:58h, 18 setembroRalph teria como alterar a posiçao da barra de navegacao que fica na parte inferior do slide??
Gostaria de coloca-la no topo ou do lado.
Obrigado.
Ralph Almeida
Posted at 11:18h, 19 setembroOla Cleber, isso você pode alterar pelo CSS =)
Renan
Posted at 09:26h, 19 setembroOlá, 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?
Ralph Almeida
Posted at 11:19h, 19 setembroTente colocar o z-index deles maior que o quadro das imagens.
Rafael Santos
Posted at 09:45h, 27 setembroÓtimo tutorial. Era exatamente o que eu estava precisando.
Lucas
Posted at 09:58h, 26 outubroopa 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
Guilherme Figura
Posted at 20:58h, 08 novembroOlá queria uma ajuda, não consigo colocar essa transição de imagens no site que eu estou desenvolvendo para o meu TCC, você poderia me ajudar através de email?
guilefigura@hotmail.com
Obrigado.
paulo cesar
Posted at 06:33h, 17 novembroboa tarde
teria como fazer esse slide ficar com o formato e estilo do facebook com o botão fechar e ele fica sobre a pagina do mesmo tipo flutuando na pagina?
Alex
Posted at 07:45h, 24 novembroAmigo parabéns pelo post, de alta qualidade. obrigado.
Edilene
Posted at 05:57h, 29 janeirocomo 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
Maria
Posted at 10:12h, 14 fevereiroQuero 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
Mateus
Posted at 17:35h, 28 fevereiroOlá, 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 });
Qaiq Alves
Posted at 18:44h, 28 marçoHá 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!
Alderian
Posted at 09:59h, 22 abrilolá, 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!!
Léo Marques
Posted at 06:33h, 24 marçobom 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
Edy
Posted at 09:36h, 16 abrilMuito bom, valew!!
Marcos Aldeia
Posted at 09:36h, 21 abrilBoa tarde Ralph!
Como faço pra q minha transição ocupe toda a tela horizontalmente!?
Grato e parabéns pelo site!
Taiana
Posted at 11:17h, 15 julhoShow de bola!
Funcionou e dá um efeito muito legal!
Deise
Posted at 13:49h, 02 abrilAmigo!!! por favor me ajudaaaa.. estou a procura de um plugin que faça esse efeito aqui…
http://www.buzzfeed.com/robinedds/how-much-britpop-icons-have-changed-since-the-90s#.dm47MG1v4
Não acho de maneira alguma :((((
Joni
Posted at 14:26h, 07 abrilEu achei muito bom, funcionou perfeitamente. Muito bem bolado
otavio
Posted at 09:59h, 09 julhobom 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?
afna
Posted at 07:41h, 27 agostoNão tenho site só principiante em html estou querer criar slide em html mas não tem como exemplo de silade deste link:
http://pt.aliexpress.com
Héber Fraga
Posted at 20:13h, 10 novembroBoa 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!
Marcos Andre
Posted at 10:36h, 05 junhoTem como deixar esse slider responsivo?
Artsfon
Posted at 02:45h, 29 julhoum isso complica pois vai ficar distorcendo a imagem. eu ja fiz com a imagem em background do site, ai fiz imagens grandes, veja: https://www.artsfon.com/funny/