Slide de imagens com Coin Slider e jQuery

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Este é um guest post enviado por Irison Andrade para o RBtech Developer.

Nesta aula irei ensinar como criar um slide de imagens utilizando o CoinSlider e jQuery. Acompanhe a aula e veja como é fácil e simples criar seu próprio slide para melhorar o seu site ou portal.

(link indisponível)

Gostou da aula? Tem alguma dúvida ou quer deixar uma sugestão? Comente logo abaixo...

Sobre o autor

Irison Andrade

Este autor é um voluntário, que além de acompanhar o blog participa enviando conteúdos para serem publicados. Participe você também!

Comentários

Atualmente temos 20 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Maria comentou em

    Acompanho sempre as videos aulas, aprendo bastante, Obg por colaborar.
    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.

    Responder
  • Cleber comentou em

    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, ou mesmo desativa-la.
    Obrigado.

    Responder
  • Gilmar Oliveira comentou em

    postando o codigo fonte corretamente

    <div id='coin-slider'>
    	<a href="http://www.perolanativa.com.br" target="_blank">
    		<img src='images/banner_0_acai.jpg'>
    		<span>
    			<b>Aa</b><br/>
    Aa  uma palmeira do norte do Brasil e, entre os indgenas,  conhecido como "i-a", a fruta que chora. Sendo tpica da Amaznia, espalha-se por toda a regio, chegando ao Maranho, Guiana e Venezuela. 
    		</span>
    	</a>
        	<a href="http://www.perolanativa.com.br" target="_blank">
    		<img src='images/banner_1_castanha.jpg'>
    		<span>
    			<b>Castanha do Brasil</b><br/>
    Fruto da castanheira, rvore de porte magnfico e dimenses notveis, com tronco de at 4 metros de dimetro e que chega a alcanar 50 metros de altura. As castanhas, frutas da castanheira, so comestveis e muito saborosas.
    		</span>
    	</a>
        
        	<a href="http://www.perolanativa.com.br" target="_blank">
    		<img src='images/banner_2_cupuacu.jpg'>
    		<span>
    			<b>Cupuau</b><br/>
    O cupuau  uma rvore de porte mdio, nativa da Amaznia, que passou a ser cultivada em quase todo o Brasil. Os sabonetes e a loo possuem extrato de Cupuau, que promove ao hidratante, emoliente, condicionante e remineralizante.
    		</span>
    	</a>
            	<a href="http://www.perolanativa.com.br" target="_blank">
    		<img src='images/banner_3_guarana.jpg'>
    		<span>
    			<b>Guaran</b><br/>
    O guaranazeiro  uma planta nativa da Amaznia, produz o fruto conhecido como guaran, espcie vegetal arbustiva e trepadeira da famlia das sapindceas, cujo nome provm do termo indgena "varana", que significa rvore que sobe apoiada em outra. Cultivado inicialmente, na Amaznia pelos ndios maus.
    		</span>
    	</a>
    
    
           	<a href="http://www.perolanativa.com.br" target="_blank">
    		<img src='images/banner_4_copaiba.jpg'>
    		<span>
    			<b>Copaba</b><br/>
    A copaba (Copaifera sp) fornece o blsamo ou leo de copaba, um lquido transparente e teraputico, que  a seiva extrada mediante a aplicao de furos no tronco da rvore at atingir o cerne.</span>
    	</a>
        
           	<a href="http://www.perolanativa.com.br" target="_blank">
    		<img src='images/banner_5_breubranco.jpg'>
    		<span>
    			<b>Breu-Branco</b><br/>
    O Breu Branco (protium pallidum)  uma rvore da floresta amaznica, que ao sofrer alguma agresso como uma picada de inseto libera uma seiva branca e brilhante como forma de defesa que tambm  chamada de breu-branco.</span></a><script type="text/javascript">
    	$(document).ready(function() {
    		$('#coin-slider').coinslider({ width: 472, heigth: 200, navigation: false, delay: 8000 });
    	});
    </script></div></td>
    Responder
  • Gilmar Oliveira comentou em

    Irison e Ricardo, boa tarde!

    Estou tentando usar este slider em meu site dentro de um determinado espaço, Porém quando coloco o slider no lugar que ele deverá ficar na página perco toda a desconfiguração, será que poderia me ajudar a como não perder a configuraçao, já redefini o tamanho das imagens e tudo porém não fica corretamente, abaixo segue o código que estou usando.
    Obs. a div meio e onde ficara o slider.

    Código fonte excluído pois não foi postado conforme as regras dos comentários

    obrigado.

    Gilmar Oliveira

    Responder
    • Irison Andrade comentou em

      Parabéns mesmo cara por ter seguido a vídeo aula e ter empregado o conteúdo com inteligência em um projeto. Pois a maioria dos comentários que eu recebo são de pessoas dizendo ter seguido o vídeo e não conseguiram fazer. Você provou que quem segue o vídeo com atenção é capaz de reproduzir perfeitamente e fazer um bom emprego do material.

      Responder
  • Claudio Macen comentou em

    Irison Andrade, parabéns pela V.A, muito bem explicada tudo certo, estou estudando php+mysql, em breve pretendo desenvolver V.A para compartilhar o conhecimento, valeu mesmo um forte abraço!

    Responder
  • Henrique comentou em

    Ótima vídeo-aula ficou tudo certo. Deu alguns erros, mas depois funcionou perfeitamente e fiquei muito feliz.

    Responder
  • Henrique comentou em

    Estou seguindo os passos porém não consegui. Fica normal: as fotos na esquerda, o título e a descrição do lado. Não está como Slide. Mas vou tentar arrumar.

    SlideShow

    Teste 1
    Lorem Ipsum é simplesmente texto aleatório da indústria da impressão e tipografia. Lorem Ipsum foi o texto padrão da indústria manequim desde os anos 1500.

    Teste 2
    Lorem Ipsum é simplesmente texto aleatório da indústria da impressão e tipografia. Lorem Ipsum foi o texto padrão da indústria manequim desde os anos 1500.

    Teste 3
    Lorem Ipsum é simplesmente texto aleatório da indústria da impressão e tipografia. Lorem Ipsum foi o texto padrão da indústria manequim desde os anos 1500.

    Teste 4
    Lorem Ipsum é simplesmente texto aleatório da indústria da impressão e tipografia. Lorem Ipsum foi o texto padrão da indústria manequim desde os anos 1500.

    $(document).ready(function() {
    $('#coin-slider').coinslider({ width: 860, height:300,effect:random, navigation: true, delay: 5000 });
    });

    Responder
    • Você precisa fazer um cadastro com seu email no site gravatar.com e colocar a imagem que você quiser lá. Automaticamente irá aparecer nos comentários de praticamente todos os blogs.

      Responder
  • Breno Mol comentou em

    Fala ai Irison blza?

    Ja usei o coinslider em um projeto que participei, http://sbot-mg.org.br/

    no inicio ele funciona normalmente, mas se eu trocar de aba dai um pouco se eu voltar no site os slides estão passando bem rapido, voce tem ideia de como resolver isso?
    Obrigado

    Responder
    • Irison Andrade comentou em

      Olha Breno, eu acessei teu site e não identifiquei esse problema que você citou, quando eu mudo de aba e volto os slides estão normais. No site do desenvolvedor tem umas indicações sobre algumas funções que se inseridas de forma inadequada atrapalha o funcionamento dos slides tanto é que o desenvolvedor aconselha usar por sua conta e risco talvez seja isso.

      Responder

Deixe seu comentário