[Resolvido] Quero de ladinho

[Diegus Miestro 21]

Olá pessoas, estou com uma dúvida aqui. Quero fazer um Slidescroll, mas não consigo deixar os arquivos de lado.

 

Digamos que eu tenha 6 arquivos de 512px e quero que eles sempre estejam um do lado do outro. Eu não consegui fazer isso, sempre vai até o limite da resolução e quebra a linha. Fiz uma solução de deixar uma div com uma largura enorme dentro de uma com overflow hidden, mas sinceramente não acredito que seja a melhor opção, principalmente se eu quero um slidescroll dinâmico.

 

Alguém tem alguma luz.

[Diéssica 140]

Mostra como tá agora.

[Guilherme Oderdenge 42]

Div com largura enorme e overflow hidden? Adorei saber que você acha que não seja a melhor opção, porque não é. Parabéns. :thumbsup:

 

É possível "burlar" as extremidades dos eixos horizontais com JavaScript, dizendo que quando uma imagem é quebrada, ela fique invisível. Mas enfim, isso são outros quinhentos...

 

Com CSS você deverá forçar uma div a se comportar ilimitadamente em seus eixos horizontais.

 

Preparei um exemplo para você que deve funcionar. Eu não testei, portanto, faça isso você mesmo.

 

HTML:

		  <div id="container">
				 <div id="sub-container">
						<div id="horizontal-container">
							   <img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/imagempb/imagem1.jpg" alt="Imagem" />
							   <img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/imagempb/imagem1.jpg" alt="Imagem" />
							   <img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/imagempb/imagem1.jpg" alt="Imagem" />
							   <img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/imagempb/imagem1.jpg" alt="Imagem" />
							   <img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/imagempb/imagem1.jpg" alt="Imagem" />
							   <img src="http://www.linhadecodigo.com.br/artigos/img_artigos/brto22/imagempb/imagem1.jpg" alt="Imagem" />
						</div>
				 </div>
		  </div>

 

No CSS:

body{
   background: #000;
}

#container{
   width: 100%;
}

#sub-container{
   overflow: auto;
}

#horizontal-container{
   margin-right:-32767px;
}

#horizontal-container img{
   float: left;
   margin: 0px 5px;
}

 

Era isso que você queria?

 

Abraço!

[Diegus Miestro 21]

Obrigado pela atenção Diéssica e Guilherme Oderdenge.

 

Guilherme Oderdenge, deu certo, mas me veio uma dúvida. Colocar uma margin alta não é a mesma coisa que colocar um width alto?

 

Fiz uma pequena alteração para apenas uma imagem ser visualizada colocando overflow Hidden e width no sub-container e quando se clica no botão próximo ele executa uma função Jquery e retira valor do Left das imagens fazendo elas girarem.

[Diéssica 140]

Guilherme Oderdenge, deu certo, mas me veio uma dúvida. Colocar uma margin alta não é a mesma coisa que colocar um width alto?

O problema está em determinar uma largura fixa. Já na margin, a largura é calculada.

 

É basicamente isso.

[Diegus Miestro 21]

Hum... Acho que entendi a idéia.