Vertical Carousel Slider

by kidino

HTML

<div id="slider">
    <div class="container">
        <a href="#"><img src="https://picsum.photos/300/300" alt="" /></a>
        <a href="#"><img src="https://picsum.photos/300/300" alt="" /></a>
        <a href="#"><img src="https://picsum.photos/300/300" alt="" /></a>
    </div>
</div>

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;

function doslider(){
    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);
        
    setTimeout(doslider,3000);
}

setTimeout(doslider,3000);