Basic accordion

HTML

<div id="slider">
  <ul>
    <li>slide 1</li>
    <li>slide 2</li>
    <li>slide 3</li>
    <li>slide 4</li>
  </ul>  
</div>

CSS

body {
  background: #888;
}

#slider {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  background:#fff;
  width: 300px;
  height: 200px;
}

#slider ul {
  position: relative;
  list-style: none;
}

#slider ul li {
  font-size: 50px;
  position: relative;
  width: 300px;
  height: 200px;
  text-align: center;
  line-height: 200px;
}

JavaScript

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

     var interval = setInterval(function () {
        move();
    }, 9999999);

  
	var slideCount = $('#slider ul li').length;
	var slideHeight = $('#slider ul li').height();
	
    function move() {
        $('#slider ul').animate({
            top: - slideHeight
        }, 1500, function () {
            $('#slider ul li:first-child').appendTo('#slider ul');
            $('#slider ul').css('top', '');
        });
    };

});