article:
Plugin: Tiny Scrollbar
article:
Creative website design example - Kitchen Sink Studios

Plugin: Tiny Circleslider

Advertisement

This 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

JS

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

HTML

<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; }


source
download
created by Maarten Baijs
example

Advertisement
Tags: plugin, js, jquery, circle, slider, develop, web, css, html

Leave a Comment

No Comment

© Creative3x Ltd.