jQuery.DIYSlider demo 2
More information, documentation and download on the project's page : http://pioul.fr/jquery-diyslider/
HTML
<script src="http://pioul.fr/ext/jquery-diyslider/jquery.diyslider.min.js"></script>
<div class="slider"><!-- the slider -->
<div><!-- a mandatory div used by the slider -->
<!-- each div below is considered a slide -->
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
<div><img src="http://placekitten.com/g/400/400"/></div>
</div>
</div>
CSS
body {
background-color: #eee;
margin: 20px;
padding: 0;
}
.slider {
border: 5px ridge #fff;
}
JavaScript
// initialize the slider
$(".slider").diyslider({
width: "400px",
height: "400px",
display: 1,
loop: true,
animationDuration: 2000,
animationAxis: "y"
});
// set up a timer to change slides automatically
$(".slider").diyslider("move", "forth");
setInterval(function(){
$(".slider").diyslider("move", "forth");
}, 5000);