Verticle Carousel

HTML

<div id="home_carousel">
            <ul>
                <li>
                    <a href="#img1" class="inline cboxElement"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                </li>
                <li>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                </li>
                <li>
                    <a href="#"><img src="images/home-truck2.jpg"></a>
                    <a href="#"><img src="images/home-truck2.jpg"></a>
                </li>
                <li>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                </li>
                <li>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                </li>
                <li>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                </li>

                <li>
                    <a href="#img1" class="inline cboxElement"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                </li>
                <li>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                </li>
                <li>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                </li>
                <li>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
                    <a href="#"><img src="http://placehold.it/90x65"></a>
          ...

CSS

#home_carousel { margin: 5px;height: 242px;width: 222px;float: left; overflow: hidden; position: absolute;}
#home_carousel a { display: block; float: left; width: 90px; height: 65px; background: url("../images/home_slidebg.png") no-repeat 0 0; padding: 3px 3px 8px; margin: 0 5px 5px;}
#home_carousel ul { list-style-type: none; display: block; position: relative; overflow: hidden;}
#home_carousel ul li { display: block; overflow: hidden;}
#home_carousel_up { display: block; position: absolute; top: 40px; right: 0; cursor: pointer;}
#home_carousel_down { display: block; position: absolute; bottom: 10px; right: 0;cursor: pointer;}

JavaScript

var myCarousel = {

        setHeight: function() {

            var $img = $('li', '#home_carousel');
            var total = 81 * $img.length;

            $('#home_carousel ul').height(total);

        },

        slide: function() {
            var outPart = $('#home_carousel ul li').outerHeight();
            $('#home_carousel_up').on('click', function() {

                var $a = $(this);

                $('#home_carousel ul').animate({
                    top: 81 +parseInt($('#home_carousel ul').css('top')) + 'px'
                }, 500, 'easeOutBounce');

            });

            $('#home_carousel_down').on('click', function() {

                var $a = $(this);
alert($('#home_carousel ul').css('top'));
                $('#home_carousel ul').animate({
                    top: parseInt($('#home_carousel ul').css('top'))-81 + 'px'
                }, 500, 'easeOutBounce');

            });

        },

        init: function() {
            this.setHeight();
            this.slide();
        }

    };

    myCarousel.init();