Stylish jQuery Content Rotator Plugin - swapmyli

swapmyli is a pretty simple jQuery plugin for creating a content rotator with a stylish timer. It supports rotating any html elements like images, text, divs, etc and can be customizable through CSS and javascript.

Basic Usage:

1. Include jQuery library and jQuery swapmyli on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="swapmyli/swapmyli.min.js"></script>

2. Create list elements you want to swap

<ul id="demo">
<li><img src="images/img-1.jpg" alt="" /></li>
<li><img src="images/img-2.jpg" alt="" /></li>
<li><img src="images/img-3.jpg" alt="" /></li>
<li><img src="images/img-4.jpg" alt="" /></li>
</ul>

3. The CSS for the rotator and timer

.swapmyli {
display: block;
}
.swapmyli.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.swapmyli.clearfix {
display: inline-block;
} /* Hide from IE Mac \*/
.swapmyli.clearfix {
display: block;
} /* End hide from IE Mac */
.swapmyli ul {
display: block;
position: relative;
height: 100%;
overflow: hidden;
}
.swapmyli ul li {
display: inline-block;
padding: 20px; /* Padding of list element */
width: 100%;
position: absolute;
clear: both;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.swapmyli.nocss ul li {
padding: 0;
}
.swapmyli .timer {
background: #e9e9e9; /* Color of timer background */
width: 100%;
height: 1px;  /* Height of timer background */
overflow: hidden;
}
.swapmyli .timer span {
background: #F36; /* Color of indicator */
width: 0%;
height: 1px; /* Height of indicator */
display: block;
}

3. Call the plugin with options

<script type="text/javascript">
jQuery(function(){
$('#demo').swapmyli({
swapTime: 700, // Speed of effect in animation
transitionTime: 1200, //  Speed of Transition of ul (height transformation)
time: 5000, // How long each slide will show
timer: 1, // Show (1) /Hide (0) the timer. 
css: 1 // Apply swapmyli css on the list elements.
});
});
//
</script>

---

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