Cambiar Slider Horizontal a Vertical

[RocoBox3000]

Hola amigos,
Encontre este slider basico que es lo que estaba buscando.
Pero me gustaria que en vez de hacer el scroll horizontal lo hicera en vertical y automaticamente.
Alguien sabe como podria cambiarlo?

Os dejo el enlace.

http://codepen.io/zuraizm/pen/vGDHl


Saludos gracias

[ArturoGallegos]

revisa el javascript y cambia lo que dice left por top o bottom y en lugar de width usa height

simple lógica :D ya lo probé y funciona.

[RocoBox3000]

Acabo de revistar el script. Lo he simplificado y lo he puesto el scroll en auto.
Pero quise poner el scroll vertical hacia abajo (bottom) pero no lo consigo.

--------------------------------------------------------------------------------------------
jQuery(document).ready(function ($) {
setInterval(function () {
moveRight();
}, 3000);
var slideCount = $('#slider ul li').length;
var slideWidth = $('#slider ul li').width();
var slideHeight = $('#slider ul li').height();
var sliderUlWidth = slideCount * slideWidth;

$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');

function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
});


#slider {position: relative;overflow: hidden;margin: 20px auto 0 auto;border-radius: 4px;}
#slider ul {position: relative;margin: 0;padding: 0;height: 200px;list-style: none;}
#slider ul li {position: relative;display: block;float: left;margin: 0;padding: 0;width: 500px; height: 300px;background: #ccc;text-align: center;line-height: 300px;}


<div id="slider">
<ul>
<li>SLIDE 1</li>
<li style="background: #aaa;">SLIDE 2</li>
<li>SLIDE 3</li>
<li style="background: #aaa;">SLIDE 4</li>
</ul>
</div>



Saludos
Gracias

[ArturoGallegos]

No te has molestado en leer lo que te dije? no veo que hayas cambiado nada en el script referente a lo que te mencione.

[RocoBox3000]

Uy perdon, me confundi de script al copiar.
Con top si funciona pero con bottom no. Eso es lo que no consigo.

jQuery(document).ready(function ($) {

setInterval(function () {
moveRight();
}, 3000);

var slideCount = $('#slider ul li').length;
var slideheight = $('#slider ul li').height();
var slideHeight = $('#slider ul li').height();
var sliderUlheight = slideCount * slideheight;

$('#slider').css({ height: slideheight, height: slideHeight });
$('#slider ul').css({ height: sliderUlheight, margintop: - slideheight });
$('#slider ul li:last-child').prependTo('#slider ul');

function moveRight() {
$('#slider ul').animate({
top: - slideheight
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('top', '');
});
};


});



Saludos

[RocoBox3000]

Ya lo logre
Muchas gracias
Saludos ;)