What is it?

Tiny Circleslider is a circular slider / carousel. That was built to provide webdevelopers with a cool but subtle alternative to all those standard carousels. Tiny Circleslider can blend in on any wepage. It was built using the javascript jQuery library.

Features

  • Supports iPhone, iPad and Android
  • Supports sliding by thumb or pager
  • A interval can be set to slide automaticaly every given milliseconds
  • Can be set to snap to a page
  • Option to fade dots when dragging is done
  • Size(radius) of the slider can be set.
  • Can fire a callback after every move.
  • Easy customizable
  • Lightweight its only 130 lines of code. mimified the size is 4 kb

Examples


$('#rotatescroll1').tinycircleslider();
						

$('#rotatescroll2').tinycircleslider({ interval: true, snaptodots: true });

Note: There is no lightbox natively in tiny circleslider for this example fancybox was used.


$('#rotatescroll3').tinycircleslider({ lightbox: true, snaptodots: true, radius: 170, hidedots: false });

How to

HTML for a basic slider like example 2 ( Download example ). 

<div id="rotatescroll">
	<div class="viewport">
		<ul class="overview">
			<li><a rel="group" href="images/hdr1.jpg"><img src="images/hdr1.jpg"></a></li>
			<li><a rel="group" href="images/hdr2.jpg"><img src="images/hdr2.jpg"></a></li>
			<li><a rel="group" href="images/hdr3.jpg"><img src="images/hdr3.jpg"></a></li>
			<li><a rel="group" href="images/hdr4.jpg"><img src="images/hdr4.jpg"></a></li>							                             
		</ul>
	</div>
	<div class="dot"></div>
	<div class="overlay"></div>
	<div class="thumb"></div>

</div>

CSS


#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay {background:url(../images/design/bg-rotatescroll.png) no-repeat 0 0;  position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(../images/design/bg-thumb.png) no-repeat 0 0; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 26px; z-index: 200;  height: 26px; }
#rotatescroll .dot { background:url(../images/design/bg-dot2.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; }
#rotatescroll .dot span { display: none; }

Internet explorer 6 doesn't support png transparency. So for the backgrounds images to work correctly in that browser you will need to add the following code below your other CSS in your head tag. Replace the images path with your own.


<!--[if lte IE 6]>
	<style type="text/css">
	/* Internet Explorer 6 PNG transparency fix */
	#rotatescroll1 .overlay { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.baijs.nl/images/design/bg-rotatescroll.png", sizingmethod='scale'); }
	#rotatescroll1 .thumb { background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.baijs.nl/images/design/bg-thumb.png", sizingmethod='scale'); }
	</style>
<![endif]-->
JS

Add jQuery and the tinycircleslider js to the bottom of your head tag. After you have done that add these lines.


<script type="text/javascript">
	$(document).ready(function(){
				
		$('#rotatescroll').tinycircleslider({ 'interval': true, snaptodots: true });
		
	});
</script>

Options

A list of all the available options and there default value

  • snaptodots: false -- shows dots when user starts dragging and snap to them
  • hidedots: true -- fadesout the dots when user stops dragging.
  • interval: false -- move to another block on intervals.
  • intervaltime: 3500 -- interval time in milliseconds.
  • lightbox: false -- when you have links with a lightbox attached this most be true for normal links to work correctly this must be false.
  • radius: 140 -- Used to determine the size of the circleslider
  • callback: null -- function that executes after every move

The image below displays how you calculate the radius of your circleslider. The center of your slider to the center of the outside circle is your radius.

Below is a example of a callback. After every move the function is executed and it will return 2 things the current li and its index.


$('#rotatescroll').tinycircleslider({
	callback: function(element, index){
		console.log(element, index);
	}
});

Support

There is no support.... but you could always try to mail  to see what happens. If you find any bugs or if you are using tiny circleslider in a project / website please let me know. I would love to see the result!