Flipping Circle Slideshow

A simple circular slideshow where we flip the image in order to navigate.

Flipping Circle Slideshow

From our sponsor: Target your best customers and see up to 88% more revenue with Predictive Segments. Sign up today.

Today we want to share a simple and fun circular slideshow with you. It’s an experimental concept and the idea is to flip a circle in a specific angle depending on which spot of the circle we click. There are three different possibilities for each side: top, middle and bottom. For example, when clicking on the top right part of the image, the circle will flip in the associated angle, making it look as if we press down that part and reveal the next image that is on the back face of the circle.

The demo features illustrations by Isaac Montemayor. See his works on Dribbble or on his website.

This is how the structure looks like:

<div id="fc-slideshow" class="fc-slideshow">
	<ul class="fc-slides">
		<li><img src="images/1.jpg" /><h3>Hot</h3></li>
		<li><img src="images/2.jpg" /><h3>Cold</h3></li>
		<li><img src="images/3.jpg" /><h3>Light</h3></li>
		<li><img src="images/4.jpg" /><h3>Dark</h3></li>
		<li><img src="images/5.jpg" /><h3>Soft</h3></li>
		<li><img src="images/6.jpg" /><h3>Hard</h3></li>
		<li><img src="images/7.jpg" /><h3>Smooth</h3></li>
		<li><img src="images/8.jpg" /><h3>Rough</h3></li>
	</ul>
</div>

And we transform it into the following:

<div id="fc-slideshow" class="fc-slideshow">

	<ul class="fc-slides">
		<!-- ... -->
	</ul>

	<nav>
		<div class="fc-left">
			<span></span>
			<span></span>
			<span></span>
			<i class="icon-arrow-left"></i>
		</div>
		<div class="fc-right">
			<span></span>
			<span></span>
			<span></span>
			<i class="icon-arrow-right"></i>
		</div>
	</nav>

	<div class="fc-flip">
		<div class="fc-front">
			<div><img src="images/4.jpg"><h3>Dark</h3></div>
			<div class="fc-overlay-light"></div>
		</div>
		<div class="fc-back">
			<div><img src="images/5.jpg"><h3>Soft</h3></div>
			<div class="fc-overlay-dark"></div>
		</div>
	</div>
	
</div>

The nav element has some empty spans that serve as “detection areas”. Each side of the circle has three areas that will be clickable, one at the top, one in the middle and one at the bottom. The i element will serve as a navigation arrow and depending on which span we are hovering, we will rotate the little arrow box to the right place. But we won’t use the arrow as the clickable area but the whole span.

The division for the circle flip contains a special 3D structure: it has a front and a back side. Once we navigate to the next or previous item, we will show that structure and rotate the flip container so that we see the back side.

The overlays make everything look a bit more realistic by providing light or darkness. We animate the opacity depending on the angle of rotation.

We simply call the plugin like this:

$( '#fc-slideshow' ).flipshow();

And this are the options for the plugin:

// the options
$.Flipshow.defaults = {
	// default transition speed (ms)
	speed : 700,
	// default transition easing
	easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

Please note, that this is very experimental and will only work as intended in browsers that support CSS 3d transforms. For others there is a simple fallback that simply shows and hides the previous or next item.

We hope you find this little plugin inspiring!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 68

Comments are closed.
  1. Very cool design idea. Will give it a try in one of my next projects for sure! ๐Ÿ™‚

  2. Just does nothing.

    Chromium
    Version 23.0.1271.97 Ubuntu 12.10 (23.0.1271.97-0ubuntu0.12.10.1)

  3. Excellent Slideshow plugin! Love the subtlety of the L and R buttons rotating according to mouse position.

  4. What is the best way to check if a browser support this, because on mobile and some chrome browser apparently it doesn’t work. So it would be awesome to load something else and still use this cool thing in production.

  5. Thanks everybody, I will try to figure out why it doesn’t seem to work for some Chrome versions. Works fine in the latest one on Mac and Win. Cheers, ML

  6. Hi,

    Just kind of works in Safari 5.1.7: First image changes fine, but then the buttons don’r work, and seem to have conflicting locations.
    (I know it’s an “old” browser, but it’s not THAT old…)

  7. Works fine in my chrome to, but strange that it doesn’t work on mobile, isn’t that webkit transformation the same as chrome?

    • Looks like a good start, would be nice to see something like a slider with your plugin.

  8. I am trying to find how to add the class active to the li, but can’t. Any suggestions, i am going to try to make it more responsive to an place the update here.

  9. For those that say it’s not working- it’s probably because you are on hardware or an OS that doesn’t have good hardware acceleration.

    Mary- I’d be very interested in a more detailed explanation of how you go about changing the slides in and out of the correct side of the ‘flipper’.

  10. it looks cool in Firefox, but it simply doesnt work in Chrome. didnt test other browsers.

    And i primarily use Chrome.

    • Hi Loรฏc,
      weโ€™ve updated the ZIP file and the demo; it should work now in the latest version of Chrome. Thank you for your feedback,
      cheers, ML

    • What is different in the new version? I can’t find what is changed in the new code.

    • I’m wondering this exact same thing. Trying to build a team section and it works for 1 of the circles, but the rest do not display the photos. Not sure how to get this going.

      Thanks ๐Ÿ™‚

    • if you’re still interested, all you have to do is change the div’s name from “fc-slideshow” to -for example- “fc-slideshow2”, then in the script that is embed in the html you add another instance to the function, like this:

      $( function() {

      $( ‘#fc-slideshow’ ).flipshow();
      $( ‘#fc-slideshow2’ ).flipshow();

      } );

      Hope it helps!

  11. Hi, if you want to make it flip automatically, it is quite simple.

    before you initialise the plugin, eg $(element).flipshow();

    you can add a public method named navigate and then call it from within a setTimeout function.

    $.Flipshow.prototype.navigate=function(element,direction){ this._navigate(element,direction); }; $("#fcSlideshow").flipshow(); setInterval( function() { $('#fcSlideshow').flipshow('navigate',$("#fcSlideshow div.fc-right span:first"),'right'); }, 3000);

    • Hi, would like to know how to make it flip automatically, i used your code but don’t run automatically.

      This is the code how is
      —————————————————————————————————-
      $( function() {

      $.Flipshow.prototype.navigate=function(element,direction){
      this._navigate(element,direction);
      };

      $(“#fcSlideshow”).flipshow();

      setInterval( function() {
      $(‘#fcSlideshow’).flipshow(‘navigate’,$(“#fcSlideshow div.fc-right span:first”),’right’);
      }, 3000);
      $( ‘#fc-slideshow’ ).flipshow();

      } );

    • Change the div id from #fc-slideshow to #fcSlideshow as used in the script and it will work.

      Great slide show

  12. hi there, I’m a newbie. Would you please tell me whats wrong, I’ve already copy and link every css and js file.. but the pictures aren’t visible. Only circle appeared.

    thanks

  13. Amazing job, tks Mary.
    One question. How can I put to circle in the same page?
    Tks

  14. Great Job Mary!!

    Hey im trying to put it to flip Automatically, but my knowledge is very basic, im trying like this:

    $. Flipshow.prototype.navigate = function (element, direction) {
    this._navigate (element, direction);
    };
    $ (“# fcSlideshow”). flipshow ();
    setInterval (function () {
    $ (‘# fcSlideshow’). flipshow (‘navigate’, $ (“# fcSlideshow div.fc-right span: first ‘),’ right ‘);
    }, 3000);
    $ (Function () {

    $ (‘# Fc-slideshow’). Flipshow ();

    });

    Can you help me?

  15. hello there ๐Ÿ™‚ why is that it doesn’t work in other browser? where is it compatible with? what version of java, etc? :O thanks in advance ~

  16. Beautiful Plugin, however I had this little request that can we get this to work on Internet Explorer (atleast on the latest version i.e. 10) ? Pretty please. ๐Ÿ™‚

  17. Hi! Thank you for this cool effect!! It’s an awesome web magic ๐Ÿ˜‰

    I’m trying to connect this effect with a slideshow in jquery. I’d like to use it like a caption for my slider but I can see no way to do it…

    Do you think is it possible? I’ve to use a kind of callback?

    Hope someone can help me!

    Thanks a lot

  18. Hi Mary !!!
    I Just Love your Work !!! I also sent you a message on Facebook if you can guide me on How you create such awesome stuff. I mean that i can implement it all by Copy/Paste but i want to create such stuff by my own. Can you please guide me ?
    Thanks !!!