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.
How to convert a list into a circle sliderTiny 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.
Circleslider in actionAfter 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:
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.