Carruseles (para Brainiac)

He intentado el vertical de texto y el horizontal de imágenes con thumbs: los he dejado tal y como se ven en la demo de la página del hack y funcionan bien :)
Puedes echarles un vistazo en este Blog de Pruebas

Te comento aquí los dos, porque sólo se diferencian, como sabes, en el HTML y en un script. Los scripts de base son los mismos, así que vamos por partes:

Horizontal, imágenes y Thumbs

.- CSS: Te pongo las URL de los links y scripts de la página, para que puedas abrirlos y cambiarlos a tu gusto:

<link href='http://zendold.lojcomm.com.br/icarousel/css/this.css' rel='stylesheet' type='text/css'/>
Este es el de los subcontenedores.
Y éste que te pongo a continuación, es el CSS general, que puedes aprovechar para el contenedor principal del carrusel:
<link href='http://zendold.lojcomm.com.br/common/css/zend.css' rel='stylesheet' type='text/css'/>

.- SCRIPTS:
Los básicos, que valen también para el otro carrusel (el de texto), son:

<script src='http://zendold.lojcomm.com.br//common/js/mootools.v1.1.js' type='text/javascript'/>

<script src='http://zendold.lojcomm.com.br//common/js/shCore.js' type='text/javascript'/>







<script src='http://zendold.lojcomm.com.br/icarousel/js/iCarousel.js' type='text/javascript'/>

además, para este carrusel necesitas este script:
<script type='text/javascript'>



window.addEvent(&quot;domready&quot;, function() {

//new Accordion($$(&quot;.accordion_toggler&quot;), $$(&quot;.accordion_content&quot;));



dp.SyntaxHighlighter.HighlightAll(&quot;usage&quot;);



var ex6Carousel = new iCarousel(&quot;example_6_content&quot;, {

idPrevious: &quot;example_6_previous&quot;,

idNext: &quot;example_6_next&quot;,

idToggle: &quot;undefined&quot;,

item: {

klass: &quot;example_6_item&quot;,

size: 640

},

animation: {

type: &quot;scroll&quot;,

duration: 1000,

amount: 1

}

});



$(&quot;thumb0&quot;).addEvent(&quot;click&quot;, function(event){new Event(event).stop();ex6Carousel.goTo(0)});

$(&quot;thumb1&quot;).addEvent(&quot;click&quot;, function(event){new Event(event).stop();ex6Carousel.goTo(1)});

$(&quot;thumb2&quot;).addEvent(&quot;click&quot;, function(event){new Event(event).stop();ex6Carousel.goTo(2)});

$(&quot;thumb3&quot;).addEvent(&quot;click&quot;, function(event){new Event(event).stop();ex6Carousel.goTo(3)});

$(&quot;thumb4&quot;).addEvent(&quot;click&quot;, function(event){new Event(event).stop();ex6Carousel.goTo(4)});

$(&quot;thumb5&quot;).addEvent(&quot;click&quot;, function(event){new Event(event).stop();ex6Carousel.goTo(5)});

$(&quot;thumb6&quot;).addEvent(&quot;click&quot;, function(event){new Event(event).stop();ex6Carousel.goTo(6)});

});



</script>

.- HTML:

<div id='container'>





<div id='container_hd'/>

<div id='container_bd'>





<form action='#'>







<br/>

<h3>Slider horizontal: Imágenes</h3>

<div id='example_6'>

<ul id='example_6_content'>

<li class='example_6_item'><a href='#'><img alt='slide 1' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_1.jpg'/></a></li>

<li class='example_6_item'><a href='#'><img alt='slide 2' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_2.jpg'/></a></li>

<li class='example_6_item'><a href='#'><img alt='slide 3' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_3.jpg'/></a></li>



<li class='example_6_item'><a href='#'><img alt='slide 4' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_4.jpg'/></a></li>

<li class='example_6_item'><a href='#'><img alt='slide 5' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_5.jpg'/></a></li>

<li class='example_6_item'><a href='#'><img alt='slide 6' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_6.jpg'/></a></li>

<li class='example_6_item'><a href='#'><img alt='slide 7' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_7.jpg'/></a></li>

</ul>

<div id='example_6_frame'>

<ul>

<li><a href='#'><img alt='thumbnail 1' id='thumb0' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_1t.jpg'/></a></li>

<li><a href='#'><img alt='thumbnail 2' id='thumb1' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_2t.jpg'/></a></li>



<li><a href='#'><img alt='thumbnail 3' id='thumb2' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_3t.jpg'/></a></li>

<li><a href='#'><img alt='thumbnail 4' id='thumb3' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_4t.jpg'/></a></li>

<li><a href='#'><img alt='thumbnail 5' id='thumb4' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_5t.jpg'/></a></li>

<li><a href='#'><img alt='thumbnail 6' id='thumb5' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_6t.jpg'/></a></li>

<li><a href='#'><img alt='thumbnail 7' id='thumb6' src='http://zendold.lojcomm.com.br/icarousel/images/ex6_7t.jpg'/></a></li>

</ul>

</div>

</div>

<br/>



</form></div></div>

Se me queda estrecha la página del blog de pruebas para el ancho del contenedor, pero... creo que puedes ver que funciona bien :)

Y, ahora, vamos a por el carrusel de texto:

Vertical de Texto con controles de top y bottom

.- CSS Y SCRIPTS: Usa los básicos que ya tenemos y sólo sustituye el último script "abierto" por éste:

<script type='text/javascript'>



window.addEvent(&quot;domready&quot;, function() {

//new Accordion($$(&quot;.accordion_toggler&quot;), $$(&quot;.accordion_content&quot;));



dp.SyntaxHighlighter.HighlightAll(&quot;usage&quot;);



new iCarousel(&quot;example_5_content&quot;, {

idPrevious: &quot;example_5_previous&quot;,

idNext: &quot;example_5_next&quot;,

idToggle: &quot;undefined&quot;,

item: {

klass: &quot;example_5_item&quot;,

size: 172

},

animation: {

rotate: {

type: &quot;auto&quot;

},

direction: &quot;top&quot;,

duration: 250,

amount: 1

}

});

});



</script>

.- HTML:

<div id='container'>



<div id='container_hd'/>

<div id='container_bd'>

<div id='example_5'>

<div id='example_5_content'>

<div class='example_5_item'>

<h4>What is Lorem Ipsum?</h4>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#39;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book...</p>



<p><a href='http://www.lipsum.com'>more information</a></p>

</div>

<div class='example_5_item'>

<h4>Where does it came from?</h4>

<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked...</p>

<p><a href='http://www.lipsum.com'>more information</a></p>

</div>



<div class='example_5_item'>

<h4>Why do we use it?</h4>

<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using &#39;Content here, content here&#39;,...</p>

<p><a href='http://www.lipsum.com'>more information</a></p>

</div>

<div class='example_5_item'>

<h4>Where can I get some?</h4>



<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don&#39;t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure...</p>

<p><a href='http://www.lipsum.com'>more information</a></p>

</div>

</div>

<div id='example_5_frame'>

<img alt='move previous' id='example_5_previous' src='http://zendold.lojcomm.com.br/icarousel/images/ex4_previous.gif'/>

<img alt='move next' id='example_5_next' src='http://zendold.lojcomm.com.br/icarousel/images/ex4_next.gif'/>

</div>



</div>

<br/>

</div></div>

La verdad es que son muy guapos, ssí señor... y no me había fijado antes de mirar los códigos, que el de texto tiene un autostart: se desliza "solo" mientras no se pulsan los controles.