Tiny Circleslider: Who Said Sliders Are Boring?

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>
      …
  </ul>
  <div class="dot"></div>
  <div class="overlay"></div>
  <div class="thumb"></div>
</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">
  $(document).ready(function(){
    $("#circleslider").tinycircleslider({
      interval: true,
      radius: 200
    });
  });
</script>

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. (dpe)