vertical carousel

by Abhay Singh

HTML

<div id="slider">
    <div class="container">
        <a href="#"><img src="http://placekitten.com/300/300" alt="" /></a>
        <a href="#"><img src="http://lorempixel.com/300/300/" alt="" /></a>
        <a href="#"><img src="http://placehold.it/300x300" alt="" /></a>
    </div>
</div>
<a id="next">Next</a>
<a id="prev">Prev</a>

CSS

#slider {
position: relative; margin: 0px; padding: 0px; 
    height: 300px; width: 300px;
    border: 1px solid #ccc;
    overflow: hidden;
}

#slider .container {
    position: absolute;
    overflow: hidden;
}

#slider .container a {
    height: 300px; width: 300px; margin: 0px; padding: 0px;
    display:block;
}

JavaScript

var counter = 0;
var images = $('#slider .container > a').length;
var nitems = images - 1;
$('#next').click(function() {
    counter++;
	var imgid = Math.abs(Math.abs(nitems - counter % (nitems*2)) - nitems ); 
    var leftpos = $('#slider img:first-child').height() * imgid;
    $('#slider .container').animate({
		top: -leftpos +'px'
	}, 300);
});
$('#prev').click(function() {
    counter--;
	var imgid = Math.abs(Math.abs(nitems - counter % (nitems*2)) - nitems ); 
    var leftpos = $('#slider img:first-child').height() * imgid;
    $('#slider .container').animate({
		top: -leftpos +'px'
	}, 300);
});