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 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:
1 2 3 4 5 6 7 8 9 10 11
<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 –
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 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:
1 2 3 4 5 6 7 8
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.