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="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="thereSomeThingAboutMe.js"></script>

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

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

3. Insert the initial images into a container.

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

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 () {
  thereSomeThingAboutMe.run();
})

6. Available options.

thereSomeThingAboutMe.run({

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