Cool jQuery Plugin For Circular Carousel Slider - Tiny Circleslider
File Size: | 1.49 MB |
---|---|
Views Total: | 10928 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.