Circular Slideshow Plugin with jQuery and CSS3

File Size: 220 KB
Views Total: 10788
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" />
<li><img src="images/2.jpg" />
<li><img src="images/3.jpg" />
<li><img src="images/4.jpg" />
<li><img src="images/5.jpg" />
<li><img src="images/6.jpg" />
<li><img src="images/7.jpg" />
<li><img src="images/8.jpg" />

2. Include jQuery Library and flipshow.js

<script src=""></script> 
<script src="js/jquery.flipshow.js"></script> 

3. Call the plugin

	$( function() {

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

	} );

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:


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