Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Naty

Galeria de Foto com botão Next e Prev

Por , em Desenvolvimento frontend

Recommended Posts

Naty    3

Naty
Postado

Olá pessoal td bom ?

 

Estou engatinhando no CSS ainda e gostaria muito de um tutorial para fazer uma galeria de imagem porém com os botões Next e Prev como no modelo abaixo....

 

Alguém poderia me ajudar...???

 

 

modelo.jpg

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Naty    3

Naty
Postado

Vamos ao HTML

 

<head>
<title>coin-slider</title>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="coin-slider.min.js" type="text/javascript"></script>
<link href="coin-slider-styles.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div id="coin-slider">
    
    <a href="img01_url" target="_blank">
	<img src="imagens/image1.jpg">
    <span>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. </span>
    </a>
    
    <a href="img02_url" target="_blank">
	<img src="imagens/image2.jpg">
    <span>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. </span>
    </a>
    
    <a href="img03_url" target="_blank">
    <img src="imagens/image3.jpg">
    <span>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. </span>
    </a>
    
    <a href="img04_url" target="_blank">
    <img src="imagens/image4.jpg">  
    <span>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. </span>
    </a>  
	</div>

<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width:320, height:480 });
});
</script>

</body>
</html>

 

Agora ao CSS

 

/*
	Coin Slider jQuery plugin CSS styles
	http://workshop.rs/projects/coin-slider
*/
*{padding:0; margin:0 }

.coin-slider { overflow: hidden; zoom: 1; position: relative; width:320px; margin: 100px auto; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 305px; padding: 10px; background-color: #000000; color: #FFFFFF; }

.cs-prev, 
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }

 

Tutorial que me peguei como base...

http://www.ralphalmeida.com/2010/08/30/otimos-efeitos-de-transicao-de-imagens-em-jquery-coin-slider/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito