Tiny Circleslider: Who Said Sliders Are Boring?

October 26th, 2012

Image- or, more general, content sliders are as popular as can be. There are plenty of them on the market. Design and functionality resemble, the choice of a slider is more or less a matter of taste. Tiny Circleslider is different though. This tool lets you place content elements in a circle. This makes for a futuristic look and feel.

Tiny Circleslider: an example

How To Convert A List Into A Circle Slider

Tiny Circleslider is a plugin for jQuery and impresses with its unusual idea. Speaking HTML we have a simple unordered list, some divs for navigation and additional design elements:

<div id="circleslider">
  <div class="viewport">
    <ul class="overview">
      <li><a rel="group" href="bild1.jpg"><img src="bild1.jpg" /></a></li>
      <li><a rel="group" href="bild1.jpg"><img src="bild1.jpg" /></a></li>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>

The container with the class viewport is used to make sure that there always is only one of the content elements visible. The list carrying the class overview defines the content elements. An additional array of three containers is used to design elements needed for the look and feel of the slider. Each list item in the overview-list is represented by a dot, defined via – well – dot, while overlay has to carry a background image which itself has to include a transparent circle. This circle is then used to mask the content. The result is what gives Circleslider its name, you guess it, a circle. The class thumb defines the element, which shall be draggable around the circle. This is the way navigation functions in Tiny Circleslider.

It is essential to keep these class names as they are referenced to in the JavaScript part of the plugin. You can gain individuality by the use of custom background images.

Circleslider In Action

After everything is marked up and designed, you will have to put the logic to it. Call jQuery and the plugin in the head of your document. Now you can transfer the ID of the HTML area the slider shall be fired up upon:

<script type="text/javascript">
      interval: true,
      radius: 200

There are a view options, you can further customize. Using interval would care for an automatic sliding through the elements, while the use radius is needed for the math behind the plugin.

Conclusion: Tiny Circleslider is simple to embed and equally simple to customize. The unusual navigation will not fit into every website out there, but where it does, it makes for an extraordinary effect. The plugin works well on both Android and iOS.


Denis works as a freelance web designer since 2005.

Tags: , , ,

6 comments for „Tiny Circleslider: Who Said Sliders Are Boring?
  1. Metaflood on October 26th, 2012 at 3:28 pm

    This is a pretty unique slider, must admit. What REALLY sold me though, was the use of Super Puzzle Fighter characters in the demo….bonus street cred right there!

  2. Theo on October 26th, 2012 at 5:11 pm

    Great to see your creative approach to sliders. These will definitely add something different to a website.

  3. swati on October 27th, 2012 at 8:58 am


  4. Theo on October 27th, 2012 at 11:22 am

    Great idea !

  5. nik on November 2nd, 2012 at 9:30 pm

    Futuristic? Rather antiquated.

  6. Zeljko on December 20th, 2013 at 11:49 am

    Nice, but is there a possibility to add touch event to work on mobile web sites?