Cool jQuery Plugin For Circular Carousel Slider - Tiny Circleslider

Tiny Circleslider is a lightweight, touch-enabled and cross-browser jQuery plugin for creating a circular carousel slider that allows you to rotate a group of images on scroll.

Basic Usage:

1. Include jQuery library and jQuery Tiny Circleslider in the head section of your page

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycircleslider.min.js"></script>

2. Create the html for the circular carousel

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

3. The 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/bg-rotatescroll.png) no-repeat 0 0;
position: absolute;
left: 0;
top: 0;
height: 300px;
width: 300px;
}
#rotatescroll .thumb {
background: url(../images/bg-thumb.png) no-repeat 50% 50%;
position: absolute;
top: -3px;
cursor: pointer;
left: 137px;
width: 100px;
z-index: 200;
height: 100px;
}
#rotatescroll .dot {
background: url(../images/bg-dot.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;
}

4. Call the plugin with options

$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ 
interval: true, 
dotsSnap: true 
});
});

5. All the options

$(document).ready(function(){
$('#rotatescroll').tinycircleslider({ 

// move to another block on intervals.
interval       : false,   

// time between intervals
intervalTime   : 3500,    

// shows dots when user starts dragging and snap to them.
dotsSnap       : false,   

// fades out the dots when user stops dragging.
dotsHide       : true,  

// The slide to start with.
start          : 0,

// Used to determine the size of the circleslider
radius         : 140

});
});

Change logs:

2015-08-09

• v2.0.8
• Make mouse work on touchscreen devices.

2015-02-23

• v2.0.7.

2015-01-20

• v2.0.6.

2014-11-30

• update.

2014-05-26

• Fixed: Scroll track first click scrolls to bottom, then no reaction to track clicks

2014-02-09

• added 2 public properties slideCurrent and angleCurrent

2014-02-04

• iOS fix.

2014-02-03

• added touch support

---

This awesome jQuery plugin is developed by wieringen. For more Advanced Usages, please check the demo page or visit the official website.