Slide horizontal?

[hector_he]

Hola a todos:
He estado mirando maneras de hacer una web donde las secciones estuviesen colocadas en horizontal y a través de un menú poder deslizarte por ellas...

Lo más aproximado que he encontrado es wslide junto jquery, aunque mi idea es que se vena todas las secciones y la que se seleccione quede en medio (en este caso quedan ocultas y tan solo se ve la seleccionada)

Ejemplo 2
http://www.webinventif.fr/wp-content...lide/index.htm

Aún así no comprendo como funciona... Tengo esto:

CSS

Código HTML:

<style type="text/css" media="screen">
			#parent2-wrap{
				border: 1px solid gray;
			}
			#parent2 li{
				background: #F2F2F2;
				padding: 15px;
				margin: 5px;
			}
			#parent2-menu a.wactive{
				font-weight: bold;
			}
		</style> 

JAVASCRIPT

Código HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery.wslide.js"></script>
<script type="text/javascript" charset="utf-8">
		$('#parent2').wslide({
		width: 250,
		height: 250,
		pos: 4,
		horiz: true
		});
      </script> 

HTML MENU

Código HTML:

<div id="menu">
<ul id="parent2-menu" class="wslide-menu">
<li><a href="#parent2-1">Sección1</a></li>
<li><a href="#parent2-2">Sección2</a></li>
<li><a href="#parent2-3">Sección3</a></li>
</ul>
</div> 

HTML SECCIONES

Código HTML:

<div id="parent2-wrap" class="wslide-wrap" style="margin: 0pt; padding: 0pt; overflow: hidden; position: relative; text-align: left; height: 250px; width: 250px;">

<ul id="parent2" style="margin: 0pt; padding: 0pt; position: absolute; width: 2250px; height: 250px; top: -6px; left: -786px;">

<li id="parent2-1" style="overflow: hidden; display: block; float: left; height: 220px; width: 220px;;" rel="526:6">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</li>

<li id="parent2-2" style="overflow: hidden; display: block; float: left; height: 220px; width: 220px;" rel="786:6">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</li>

<li id="parent2-3" style="overflow: hidden; display: block; float: left; height: 220px; width: 220px;" rel="1046:6">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
</li>

</ul>
</div> 

Alguien me podría ayudar?
Muchas gracias!

[juaniquillo]

Yo he hecho dos websites parecidas a lo que tu dices pero vertical usando jquery :

http://www.gtama.com/
http://www.osipr.com/ (hice el sistema pero los otros programadores agregaron el contenido html)

Para hacerlo horizontal sólo se tiene que quitar el float:left de los divs/

pero en mi caso he usado el muy buen video tutorial que remy sharp tiene su página Jquery for Designers:
http://jqueryfordesigners.com/coda-slider-effect/

Funciona bien para páginas sencillas, pero una vez empiezas a agregar mas contenido se hace mas complicado lograr tener un balance de contenido, usablididad y buenas prácticas en los estandars. Necesitas estar constantemente probando que todo funcione bien sin el uso de javascript, sin contar el potencial uso de ajax excesivo, ya que no puedes cambiar de página.

[mayid]

Hay varios. Por ahi te guste este que hace scrool con el mouse:

http://www.maaki.com/thomas/SmoothDivScroll/

Yo personalmente combine ese con este otro:

http://sixrevisions.com/demo/slideshow/final.html

Y todo va en el CSS. El segundo necesitaria margenes mas anchos como mostrar los margenes (lo que queda afuera). En cambio el primero funciona asi naturalmente.

[hector_he]

Muchas gracias a los dos. Ya lo he podido solucionar con el ejemplo de "Jquery for Designers".

La web es super sencilla, aunque me gustaría que todas las secciones se vean y la seleccionada se quede en medio, es decir que no se oculten las demás. Lo he visto hacer en Flash pero no se si se puede hacer con java.

Una especie de esto: http://growmedia.ca/blog/ pero en horizontal y controlada por los botones.

Gracias!

[hector_he]

Navegando por ahí he encontrado esta nueva versión del Coda-Slider para todas las últimas versiones de los navegadores y con cajas autoajustables!

http://www.ndoherty.biz/demos/coda-slider/2.0/#4