Circular Slideshow Plugin with jQuery and CSS3

A simple and fun slideshow plugin built with jQuery and CSS3 transforms that flips a circle in a specific angle depending on which spot of the circle we click.  It works in all modern browsers which support the CSS3 3D transforms.

How to use it:

1. Markup

<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>

2. Include jQuery Library and flipshow.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="js/jquery.flipshow.js"></script> 

3. Call the plugin

<script>
	$( function() {

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

	} );
</script>

4. Options

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

How to use it:

2013-04-04

• Fixed for Chrome 26+

---

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.