Stylish jQuery Content Rotator Plugin - swapmyli
File Size: | 489 KB |
---|---|
Views Total: | 2355 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.