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
    });