Circular Image Rotator with jQuery and Animate.css

File Size: 73.3 KB
Views Total: 3736
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Circular Image Rotator with jQuery and Animate.css

A super tiny jQuery plugin to create a circular image rotator/carousel with awesome CSS3 entrance/exit animations based on animate.css.

How to use it:

1. Include jQuery JavaScript library and the thereSomeThingAboutMe.js script in the Html page.

<script src="//"></script>
<script src="thereSomeThingAboutMe.js"></script>

2. Include the required animate.css from a CDN.

<link rel="stylesheet" href="//">

3. Insert the initial images into a container.

<div class="demo">
  <img src="1.jpg" id="myPic" class="animated">

4. Make your rectangular images appear circular with CSS.

.demo > img {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border: 10px solid #efefef;

5. Call the plugin to active the image rotator/carousel.

$(function () {;

6. Available options.{

// an array of images
pictures: ['1.jpg', '2.jpg', '3.jpg'],

// CSS ID for initial image
object: '#myPic',

// The entrance animation type (In).
inAnimation: 'flipInX',

// The exit animation type (Out). 
outAnimation: 'flipOutY',

// Random image
random: true,

// Start image
startNumber: 0,

// transition delay
time: 5000


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