I use cookies to give you the best possible website experience.
By using COIDEA, you agree to our Privacy Policy.OK, CLOSE

Sliders, slideshows, and galleries are extremely common on a variety of different types of websites. Every single webpage, web application or any other thing that you can build using CSS, HTML and JavaScript/jQuery, surely has to include a slideshow somewhere. The slideshow can be used either to display some images, styled divs or whatever you can imagine.

COIDEA - Slideshow with Animated Circular Navigation

Suppose now you would like to add a slideshow to your webpage, but you need inspiration or a ready-to-use product that you simply can download and use, or perhaps upgrade as needed. Although there are many open-source solutions available for slideshows, I do not believe that they contain such creative navigation with thumbnails as you can see here and now. In this article, I will show you how to create a fullscreen, responsive slideshow with animated circular navigation as well as how to easily make letter animations with the help of CSS3, jQuery and GSAP's TweenMax, TextPlugin and CSSPlugin.

As you can see in the code, this slideshow with animated circular navigation consists of two sections: navigation and details.

As you might guess, my focus during the creation of this article was on the navigation itself. Immediately after the web site loads, a few things happen. First, I find every headline and around each letter inside the headline I add a span with a special "letter" class. Secondly, I find all navigation items and position all these items so that they form a circle. After that, I find the background image inside the items, rotate them in such a way to keep the angle from zero degrees, and find the angle of rotation of each item and store this data in the HTML element that I called the "rotate-holder". This angle of rotation will later be used when calculating how much and in what direction to rotate the navigation so that the active item always (after the click) moves to the center position that I conceived as the position for the active state. It is important to emphasize that every time a hover occurs ( therefore, before click happens ) on the items, we pick up the angle of rotation and in this way we always get an accurate angle of rotation. After clicking on the item I activate the rotation, find the appropriate detail item and activate the letters animation as well as the fullscreen background image animation.

I hope you liked the way I created this slideshow with animated circular navigation and find my demo inspiring and useful!

References and Credits