What can you do with Swapmyli?
The plugin allow you to create a list tag rotator in a minute !
Simply add some a small code and the rotator is ready!
Installation
Installing Swapmyli is pretty straight forward. Simply include the both the jQuery, swapmyli.js and CSS file.
Add these codes in the <head> tag.
<link rel="stylesheet" href="swapmyli/swapmyli.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="swapmyli/swapmyli.js"></script>
You can also load the compressed library.
<script type="text/javascript" src="swapmyli/swapmyli.min.js"></script>
How to use it?
Creating a new Swapmyli is pretty simple. Just build a list of elements and apply by using format below:
<script>
$(function() {
$('ul').swapmyli();
});
</script>
Here are the settings that can be changed:
<script>
$(function() {
$('#myList1').swapmyli({
swapTime: 900, // Speed of effect in animation
transitionTime: 700, // Speed of Transition of ul (height transformation)
time: 4000, // How long each slide will show
timer: 1, // Show (1) /Hide (0) the timer.
css: 1 // Apply swapmyli css on the list elements.
});
});
</script>
Simple Rotator
- Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
- Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
- Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.
- Tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
$('#myList1').swapmyli({
swapTime: 300,
transitionTime: 500,
time: 4000,
timer: 0
});
Rotator with Timer
- Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
- Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
- Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
- Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.
- Tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
$('#myList1').swapmyli({
swapTime: 300,
transitionTime: 500,
time: 4000,
timer: 0
});
Gallery-like
$('#gallery2').swapmyli({
swapTime: 600,
transitionTime: 800,
time: 3000,
timer: 1
});
Just an idea...
-
WOW!
-
THAT
-
IS
-
AWESOME
-
PLUGIN
$('#myList3').swapmyli({
swapTime: 400,
transitionTime: 1000,
time: 1200,
timer: 0,
css: 0
});