Ir para conteúdo

POWERED BY:

Arquivado

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

pinoc

Carousel

Por , em Desenvolvimento frontend

Recommended Posts

pinoc    2

pinoc
Postado

Boa tarde pessoal.

 

Meu problema acredito eu que seja resolvido com css sem problema mas não sei como.

Seguinte estou fazendo um site para um cliente e o mesmo pediu para min colocar um slide que parece a imagem principal centralizada e a anterior/próxima ao lado com uma opacidade menor, mas como eu irei fazer envio por MYSQL depois gostaria de saber como faço para fazer as imagem que serão a próxima e anterior ficarem com uma opacidade menor do a principal que esta centralizada.

 

E outro problema que estou tendo é para aparecer conteúdo em baixo do slide como no slide estou dando um OVERFLOW: HIDDEN nada aparece abaixo tudo que coloco abaixo do slide fica literalmente em baixo do slide assim ficando escondido.

 

Segui abaixo meu codigo CSS para o slide

#wrapper {
background-color: #fff;
width: 100%;
height: 249px;
overflow: hidden;
left: 0;
z-index: 1 !important;
margin-top: -7px;
}
#carousel img {
display: block;
float: left;
}

 

Segui abaixo meu codigo HTML completo

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Exathum - Curso e colégio</title>

<link href="css/estilo.css" rel="stylesheet" type="text/css" />


<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://coolcarousels.frebsite.nl/c/2/jquery.carouFredSel-5.5.5-packed.js"></script>

<script type="application/javascript">

$(function() {
$('#carousel').carouFredSel({
	width: '100%',
	items: 3,
	scroll: {
		items: 1,
		duration: 1000,
		pauseDuration: 8000
	},
	prev: '#prev',
	next: '#next'
});
});

</script>

</head>

<body>
<div id="total">
<div id="geral">
	<?php include ("topo.php"); ?>
   </div><!--GERAL-->
</div><!--TOTAL-->
<div id="wrapper">
<div id="carousel">
	<img src="banner/1.jpg" alt="building1" width="1000" height="249" />
	<img src="banner/2.jpg" alt="building1" width="1000" height="249" />
       <img src="banner/3.jpg" alt="building1" width="1000" height="249" />
       <img src="banner/2.jpg" alt="building1" width="1000" height="249" />
       <img src="banner/1.jpg" alt="building1" width="1000" height="249" />
       <img src="banner/3.jpg" alt="building1" width="1000" height="249" />
</div>
<div id="total">
<div id="geral">
	<h1>teste</h1>
   </div><!--GERAL-->
</div><!--TOTAL-->
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diegus Miestro    21

Diegus Miestro
Postado

Sobre o controle de Opacidade, já que está usando Jquery acho melhor usar esse efeito com Jquery. Sobre os elementos que somem com Overflow Hidden, é que nada além do tamanho definido aparece, acho que apenas aumentando o valor do Height de 249px pra 500px, ou um valor maior, resolva.

Compartilhar este post

Link para o post
Compartilhar em outros sites

pinoc    2

pinoc
Postado

Sobre o controle de Opacidade, já que está usando Jquery acho melhor usar esse efeito com Jquery. Sobre os elementos que somem com Overflow Hidden, é que nada além do tamanho definido aparece, acho que apenas aumentando o valor do Height de 249px pra 500px, ou um valor maior, resolva.

 

Diegus Miestro

 

O problema com o overflow consegui resolver tinha div dentro de div errada.

Mas sobre a opacidade não consegui achar nada relacionado nem com jquery saberia me indicar algo talvez?

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diegus Miestro    21

Diegus Miestro
Postado

Sobre Opacidade, você pode utilizar o fadeTo do Jquery: http://api.jquery.com/fadeTo/

 

Ou você poderá utilizar o animate: http://api.jquery.com/animate/

 

O animate vai além de opacidade para o seu caso o fadeTo tá de boa.

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