1 - get required libs:
http://sorgalla.com/projects/jcarousel/
http://jquery.com/
2 - write simple HTML file and add your images in list:
<!DOCTYPE>
<html>
<head>
<title>jCarousel Vertical Demo</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
vertical: true,
scroll: 2,
auto: 5 //autoscroll every 5 secs
wrap: 'circular' //scroll images circularly
});
});
</script>
</head>
<body>
<ul id="mycarousel" class="jcarousel-skin-simple">
<li><a href="#"><img border="0" src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" alt="" /></a></li>
<li><a href="#"><img border="0" src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" alt="" /></a></li>
</ul>
</body>
</html>
3 - Extract jcarousel package and copy jquery-1.4.2.min.js and jquery.jcarousel.min.js to same folder where is your html file.
4 - create new css file "skin.css" with following content
5 - Now you can play with CSS and jcarousel configuration to make best image scroller for your site.
Thanks for reading this.
.jcarousel-skin-simple .jcarousel-container {
}
.jcarousel-skin-simple .jcarousel-direction-rtl {
direction: rtl;
}
.jcarousel-skin-simple .jcarousel-container-vertical {
width: 75px;
height: 75px;
padding: 0px 0px;
}
.jcarousel-skin-simple .jcarousel-clip-vertical {
width: 75px;
height: 350px; //scroller height
}
.jcarousel-skin-simple .jcarousel-item {
width: 75px; // picture width
height: 75px; // picture height
}
.jcarousel-skin-simple .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
margin-right: 0;
}
.jcarousel-skin-simple .jcarousel-item-vertical {
margin-bottom: 10px;
}
.jcarousel-skin-simple .jcarousel-item-placeholder {
background: #fff;
color: #000;
}
5 - Now you can play with CSS and jcarousel configuration to make best image scroller for your site.
Thanks for reading this.
