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

Ó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.

Ralph Almeida
nosfer@gmail.com

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 Comentários
  • diego fuzatto
    Posted at 14:31h, 17 setembro Responder

    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

  • Yuri
    Posted at 09:57h, 30 setembro Responder

    Valew ae Ralph…. muito legal esse post…
    valew
    abç

  • felipe
    Posted at 08:41h, 26 outubro Responder

    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

  • Paulo
    Posted at 10:34h, 31 outubro Responder

    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();
    });

    • Ralph Almeida
      Posted at 10:03h, 08 novembro Responder

      Olá 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 novembro Responder

    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.

  • diegocrusius
    Posted at 09:41h, 08 novembro Responder

    Não funciona com jquery 1.4. Testei no 1.3.2 e funcionou.

  • Rene
    Posted at 05:58h, 06 dezembro Responder

    Baixei a versão JQuery 1.3.2 e não funcionou tb… por que será?

  • Rene
    Posted at 08:08h, 06 dezembro Responder

    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

  • Luciana
    Posted at 20:05h, 26 janeiro Responder

    Muito bom! Obrigada por disponibilizar e ensinar 🙂 Funcionou perfeitamente na versão 1.4.2 do jQuery.

  • Otávio Piazzi
    Posted at 15:51h, 27 janeiro Responder

    nossa, top demais e funcionou com o 1.4.4

  • Alberto Jr
    Posted at 11:45h, 10 fevereiro Responder

    Os “quadradinhos” do menu estão centralizados e as imagens à esquerda. Como centralizo tudo??? Valeuuuuu

    • Ralph Almeida
      Posted at 04:02h, 09 maio Responder

      Veja se colocou o tamanho exato da imagem na chamada do script no rodape.

  • Rafael
    Posted at 04:54h, 31 março Responder

    Ralph 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 abril Responder

    MUITO 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 maio Responder

    Posso usá-lo em um site que eu estou desenvolvendo e vou comercializar?

    • Ralph Almeida
      Posted at 04:01h, 09 maio Responder

      Ola 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 maio Responder

    Estou 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 maio Responder

    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)??

  • Teo Anderson
    Posted at 22:34h, 13 maio Responder

    Funciona no blogger/blogspot???

  • Ricardo
    Posted at 16:57h, 14 junho Responder

    Cara, 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 agosto Responder

    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?

  • mauricio
    Posted at 08:55h, 05 agosto Responder

    muito bom estava procurando um diferente para colocar num site de cliente

  • Robson
    Posted at 10:54h, 30 agosto Responder

    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

    • Ralph Almeida
      Posted at 15:37h, 11 setembro Responder

      para centralizar, coloque uma div com o seguinte css: defina um tamanho no width e use margin:0 auto;

  • Guilherme
    Posted at 13:52h, 09 setembro Responder

    Não consegui abrir o arquivo, o que fasso?

    • Ralph Almeida
      Posted at 15:36h, 11 setembro Responder

      o arquivo está zipado. baixa o WinRAR para descompactar esse arquivo.

  • Guilherme
    Posted at 13:52h, 09 setembro Responder

    Tipo, o jquery, não sei fazer o download

  • Valmor Seabra
    Posted at 21:04h, 14 setembro Responder

    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.

    • Ralph Almeida
      Posted at 03:44h, 15 setembro Responder

      Olá Valmor, vc altera o tamanho na chamada do script:

  • Washington
    Posted at 12:10h, 17 setembro Responder

    Muito bom post, parabéns.

  • Rodrigo
    Posted at 09:09h, 03 outubro Responder

    Olá, 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 novembro Responder

      Olá, nao tenho certeza, mas acho que dá sim.
      Uma sugestão, use o wordpress, é bem melhor!

  • Rodrigo
    Posted at 13:04h, 03 outubro Responder

    Coloquei mas as imagens ficarão uma embaixo da outra.

    • Ralph Almeida
      Posted at 17:04h, 07 dezembro Responder

      Ola Rodrigo, isso acontece geralmente quando o caminho do script e do css estao errados. De uma verificada 😉

  • Thiago Henrique
    Posted at 08:30h, 03 novembro Responder

    estou 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 novembro Responder

    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.

    • Ralph Almeida
      Posted at 03:52h, 17 novembro Responder

      olá gabriel, faça o looping dentro da div do coin-slider:

      < ?php $sql = mysql_query("SELECT imagem FROM banners ORDER BY rand() LIMIT 5"); while ($a = mysql_fetch_array($sql)) echo < img src='imagens/banners/".$a['imagem']."' />";
      ?>

  • Dikson
    Posted at 04:13h, 03 janeiro Responder

    Coloquei aqui mais as imagens ficam grandes uma em baixo da outra. Alguem pode me ajudar ?

    • Ralph Almeida
      Posted at 04:15h, 03 janeiro Responder

      Ola Dikson, isso acontece geralmente quando o caminho do script e do css estao errados. De uma verificada 😉

  • Dikson
    Posted at 06:44h, 03 janeiro Responder

    Ola Ralph, valeu pela dica conseguir aqui um abraço!!!! É muito massa!!
    agora vou implementar no portal da empresa

  • Henrique
    Posted at 05:04h, 05 janeiro Responder

    Fiz 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 janeiro Responder

    Cara, excelente! Estou iniciando por conta própria em javascript e esse tuto era tudo que eu precisava!

  • ERLEY
    Posted at 18:46h, 04 fevereiro Responder

    Rapaz, não consigo fazer funcionar de jeito nenhum.

  • wdlazaro
    Posted at 08:13h, 22 fevereiro Responder

    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?

    • Ralph Almeida
      Posted at 14:16h, 22 fevereiro Responder

      Opa, coloque o spw e sph com valores 1, ai vai aparecer o efeito fade.

  • daniel
    Posted at 00:50h, 24 fevereiro Responder

    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.

  • Ilo Soares Barbosa
    Posted at 11:05h, 08 março Responder

    Pessoal, 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 abril Responder

    nao consigo aumentar o tamanho altura das imagens pq?

    • Ralph Almeida
      Posted at 13:50h, 14 maio Responder

      Olá, defina o tamanho na chamada do script
      $(‘#coin-slider’).coinslider({ width: 900, height: 290 });

  • Pacífico
    Posted at 16:10h, 29 abril Responder

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

  • Orlando
    Posted at 14:24h, 11 maio Responder

    Ralph .. 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 maio Responder

      Obrigado Orlando, na época não tinha essa versão nova e acabei não testando.

  • Rodrigo
    Posted at 07:33h, 12 maio Responder

    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

    • Ralph Almeida
      Posted at 13:48h, 14 maio Responder

      Olá 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 maio Responder

    Olá, 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 maio Responder

      Olá Filipe, defina o tamanho na chamada do script:
      $(‘#coin-slider’).coinslider({ width: 900, height: 290 });

  • Filipe Mantoan
    Posted at 10:07h, 15 maio Responder

    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?

    • Ralph Almeida
      Posted at 11:15h, 15 maio Responder

      Ah, aí você pode forçar na tag < img >
      < img src=’img01.jpg’ width='500' height='350' >

  • Filipe Mantoan
    Posted at 10:22h, 16 maio Responder

    Olá Ralph Almeida,

    Mesmo forçando na tag não funciona. Teria outra alternativa?

  • Rodrigo
    Posted at 05:56h, 19 maio Responder

    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

  • Rodrigo
    Posted at 05:56h, 19 maio Responder

    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

  • Rodrigo
    Posted at 06:10h, 19 maio Responder

    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

    • Ralph Almeida
      Posted at 12:04h, 21 maio Responder

      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

  • Bulls
    Posted at 11:49h, 21 maio Responder

    Top o post!

    abração fera!

  • Filipe Mantoan
    Posted at 03:07h, 22 maio Responder

    Olá 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 maio Responder

    Filipe, 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 maio Responder

    Olá Ralph,

    Segue código abaixo:


    titulo

    Mesmo assim ele não redimensiona a imagem.

    • Ralph Almeida
      Posted at 08:31h, 22 maio Responder

      Ué, 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 maio Responder

    Tô 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 maio Responder

    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

  • Fabio Teodosio
    Posted at 14:50h, 26 maio Responder

    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 !

  • Odair
    Posted at 18:13h, 04 junho Responder

    Parabéns, cara ótimo post, ganhei a noite =D

  • Gilmar Oliveira
    Posted at 16:19h, 06 junho Responder

    Cara 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 junho Responder

    muito 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 junho Responder

    Amigo 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 julho Responder

    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

    • Ralph Almeida
      Posted at 08:22h, 20 julho Responder

      Yuri, o link que vc mandou não funciona. Manda o correto para eu lhe ajudar.
      Abraços

  • Yuri
    Posted at 14:51h, 20 julho Responder

    Raph, segue o link correto.
    http://www.nucleoestudo.ufla.br/nefor/teste.htm
    Obrigado

    • Ralph Almeida
      Posted at 16:06h, 22 julho Responder

      Yuri, 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 julho Responder

    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)

    • Ralph Almeida
      Posted at 03:19h, 23 julho Responder

      Opa 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 julho Responder

    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 😉

  • Lucas
    Posted at 14:56h, 24 julho Responder

    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 });
    });

    • Ralph Almeida
      Posted at 10:57h, 27 julho Responder

      Opa 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 agosto Responder

    Sgui 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 setembro Responder

      Ola Nina, confere os caminhos dos arquivos jquery e do script, geralmente é isso.

  • Marcos
    Posted at 13:05h, 04 setembro Responder

    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

  • Cleber
    Posted at 07:58h, 18 setembro Responder

    Ralph 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.

  • Renan
    Posted at 09:26h, 19 setembro Responder

    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?

    • Ralph Almeida
      Posted at 11:19h, 19 setembro Responder

      Tente colocar o z-index deles maior que o quadro das imagens.

  • Rafael Santos
    Posted at 09:45h, 27 setembro Responder

    Ótimo tutorial. Era exatamente o que eu estava precisando.

  • Lucas
    Posted at 09:58h, 26 outubro Responder

    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

  • Guilherme Figura
    Posted at 20:58h, 08 novembro Responder

    Olá 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 novembro Responder

    boa 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 novembro Responder

    Amigo parabéns pelo post, de alta qualidade. obrigado.

  • Edilene
    Posted at 05:57h, 29 janeiro Responder

    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

  • Maria
    Posted at 10:12h, 14 fevereiro Responder

    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

  • Mateus
    Posted at 17:35h, 28 fevereiro Responder

    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 });

  • Qaiq Alves
    Posted at 18:44h, 28 março Responder

    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!

  • Alderian
    Posted at 09:59h, 22 abril Responder

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

  • Léo Marques
    Posted at 06:33h, 24 março Responder

    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

  • Edy
    Posted at 09:36h, 16 abril Responder

    Muito bom, valew!!

  • Marcos Aldeia
    Posted at 09:36h, 21 abril Responder

    Boa 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 julho Responder

    Show de bola!
    Funcionou e dá um efeito muito legal!

  • Deise
    Posted at 13:49h, 02 abril Responder

    Amigo!!! 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 abril Responder

    Eu achei muito bom, funcionou perfeitamente. Muito bem bolado

  • otavio
    Posted at 09:59h, 09 julho Responder

    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?

  • afna
    Posted at 07:41h, 27 agosto Responder

    Nã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 novembro Responder

    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!

  • Marcos Andre
    Posted at 10:36h, 05 junho Responder

    Tem como deixar esse slider responsivo?

  • Artsfon
    Posted at 02:45h, 29 julho Responder

    um 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/

Postar um comentário