Circular Slideshow

A responsive interface which allows users to create amazing menus, presentations, portfolios, and slideshows using a fancy circular pattern.

Created by Ruben Rizzi

Purchase

Index

Cell example

Creation of three Circular Slideshow. Five petals, five floating words and ten circles containing carbonite.

Cell example with description

Clicking on a carbonite element makes the associated description element appear.

Cell example, mobile

Resizing the window causes all the elements to resize while maintaining proportions, until they enter in the mobile mode.

Cell example infection

This Circular Slideshow has the same number of elements, but the arrangement is changed, and their shapes are elliptical.

Cell example infection with description

Different description style. The possibilities are infinite, the only limit is imagination!

Beehive example

Creation of two Circular Slideshows. Six inner cells and six icon cells. The hexagons are responsive too!

Beehive example, mobile

Resizing the window causes all the elements to resize while maintaining proportions, until they enter in the mobile view.

Cube example

Five Circular Slideshows. Three concentric grey lines, six tangent blue edges, three tangent letters, three tangent holes and three concentric grey lines.

Cube example, mobile

Mobile visualization with description. Note that Circular Slideshow works as well with global rotations.

Peacock example

Three Circular Slideshow with a lot of feathers! Note that this time we have semicircles instead of full circles!

Compatibility


  • IE9
  • IE10
  • IE11
  • Chrome
  • Firefox
  • Safari
  • iOS Safari
  • Android Browser
  • Chrome for Android

Basic usage - 1.a

Let’s suppose we have this folder structure, including root/ the directory of the project:


root/
----- lib/
---------- js/
--------------- jquery-1.11.1.min.js
--------------- media.match.min.js
--------------- enquire.min.js
--------------- jquery.circular-slideshow.min.js
---------- css/
--------------- circular-slideshow.css
----- index.html
					

Include jquery followed by the plugin script in the head:


<script type="text/javascript" src="lib/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="lib/js/enquire.min.js"></script>
<script type="text/javascript" src="lib/js/jquery.circular-slideshow.js"></script>
					

Basic usage - 1.b

Include also the plugin stylesheet in the head:


<link type="text/css" rel="stylesheet" href="lib/css/circular-slideshow.css">
					

For IE9 compatibility an additional script is needed. To handle the issue, before enquire.js and jquery.circular-slideshow.js, insert the following code:


<script type="text/javascript">
  if(!window.matchMedia) {
    document.write('<script type="text\/javascript" 
    src="lib\/js\/media.match.min.js"><\/script>');
  }
</script>
					

Basic usage - 2.a

For a basic Circular Slideshow, insert in index.html the markup:



  • My
  • First
  • Circular
  • Slideshow

Basic usage - 2.b

The output will be four words arranged from the center having the same distance between them.


And that’s it! The script identifies automatically the classes and will create the Circular Slideshow with default options. In this example we used <div>, <ul> and <li>, but the script works with every kind of HTML elements! We only care about classes.

Advanced usage - 1

This is the complete customization for the HTML:


  • BORON

  • IRON

  • Al4C3

  • Aluminium carbide, chemical formula Al4C3, is a carbide of aluminium. It has the appearance of pale yellow to brown crystals. It is stable up to 1400 °C. It decomposes in water with the production of methane.
  1. It is possible to nest multiple Circular Slideshow element inside the same container. This allows the creation of composed slideshow sharing the same center.
  2. Useful class which allows horizontal centering and vertical centering (it takes advantage of the 'ghost element' vertical centering technique).
  3. This class define a description element for the previous sibling, that should be anything but another description element. By default a description element is hidden until an user operation such as click or hover is accomplished on the related previous sibling.

Advanced usage - 2.a

After this complete HTML overview, we can switch to javascript to create our customized Circular Slideshow. This is the basic usage, which is equivalent to the one performed by the script automatically:


$('.circular-slideshow').circularSlideshow();
					

It’s possible to pass an object to the function to customize our Circular Slideshow. We eventually should define an ID for each .circular-slideshow and call them individually to be able to customize each. For example in the previous HTML code we can add the IDs:

		

      Advanced usage - 2.b

      Then for both we add these lines of code in a custom javascript file included in index.html:

      
      $('#categories').circularSlideshow({
       	mediaQueryMinWidth: ‘600px’,
       	offset: 0.5,
       	angleStart: 36
      });
      $('#activities').circularSlideshow({
       	mediaQueryMinWidth: ‘600px’,
       	centralDesc: true,
       	showDescOnHover: true
      });
      					

      The next section covers the complete API list relative to the configuration object.

      Configuration object API

      
      orientation: false,                     // false, 'tangent', 'radial', number from 0 to 360. It represents the angle formed between
                                              // a child and the center. 0 = 'radial'; 90 = 'tangent'; false = children don't rotate.
      noContentOrientation: true,             // false, true. If false the whole content inside the parent rotate.
      angleStart: 0,                          // values from 0 to 360. Angle position of the first child.
      distribution: 1,                        // values from 0 to 1. It distributes the children evenly around the circumference.
                                              // 1 = they cover the whole circumference; 0.5 = they cover only half circumference.
      avoidOverlap: true,                     // false, true. Change how distribution is calculated, considering the last child or not. 
      clockwise: true,                        // false, true. If false the children are arranged counter-clockwise.
      centralDesc: true,                      // false, true. If false the description appears under the corresponding child.
      mediaQueryMinWidth: '768px',            // css values. It determines the minimum width which the circular slideshow appears.
      offset: 1,                              // values from 0 to 1. Scale radio factor that determines the distance from the center.
      showDescOnHover: false,                 // false, true. If true the description is shown when the corresponding child is hovered.
      showDescOnClick: true,                  // false, true. If true the description is shown when the corresponding child is clicked.
      onChildMouseenter: function(e) {},      // function. It is fired when a child get the mouseenter state.
      onChildMouseleave: function(e) {},      // function. It is fired when a child get the mouseleave state.
      onChildClick: function(e) {},           // function. It is fired when a child is clicked.
      onDescMouseenter: function(e) {},       // function. It is fired when a description get the mouseenter state.
      onDescMouseleave: function(e) {},       // function. It is fired when a description get the mouseleave state.
      onDescClick: function(e) {},            // function. It is fired when a description is clicked.
      onLayoutChange: function(isCircular) {} // function. If isCircular is true the layout is changing from the circular presentation 
                                              // to the standard one. If it is false the opposite.
      					

      Other operations - Destroy

      
      .destroy()
      					

      The script allows the user to destroy a previously created Circular Slideshow. Let’s suppose we want to destroy both categories and activities Circular Slideshow:

      
      $('#categories').data('circularSlideshow').destroy();
      // Circular Slideshow #categories destroyed
      $('#activities').data('circularSlideshow').destroy();
      // Circular Slideshow #activities destroyed
      					

      This operation will reset the space orientation of the elements to default and will unbind all the callbacks registered by the user.

      NB: creating a new Circular Slideshow on an existing one automatically destroy the previous one.

      Other operations - Options

      
      .options
      					

      The script allows the user to get the option object of an existing Circular Slideshow. This can be useful to create a Circular Slideshow which inherits the options of an existing one.

      
      var options = $('#activities').data('circularSlideshow').options;
      // make changes.
      options.offset = 0.5;
      // creation of the same Circular Slideshow having half distance from the center.
      $('#activities').circularSlideshow(options);
      					

      Living Examples

      To understand better the potential of these features, play a little bit with the living examples provided below: