About

Image rotator based on dfcreative's mod.
Rotation starts on mouse rolled over. Whem mouse moves out – slideshow returns to first image.
Standart functional is extended by "show me last slide" option with external manage (it is useful if you want to add some special last slide and let user stop slideshow on it)

How to use

<link rel="stylesheet" type="text/css" href="imageRotatorStyle.css">

After DOM:

<script src="mod.min.js" type="text/javascript"></script>
<script src="image-rotator.js" type="text/javascript"></script>

Create rotator element with class "image-slider" to it and define some additional attributes.
Rotator will stretch to it's container size.
Define your images array (images would be scaled to rotator size), special last image (if needed), and set preloader attribute to true if you want it to be showed. Otherway - don't set it ever.
Animation and idle time are set in corresponding parameters in seconds (default values are both 1 second)

<div class="image-rotator"
     slides="1.jpg,2.jpg,3.jpg" 
     datamap="1_big.jpg"  
     indicateSlides="true" 
     animating=".5" 
     idle="2" 
</div>

To show special last slide – bind it from outside with method showLast();

<script type="text/javascript">
    $(document).on("mouseenter", ".last-slide-btn", function() {
        $(e.target).closest('.image-rotator').showLast(); 
    });

    $(document).on("mouseleave", ".last-slide-btn", function() {
        $(e.target).closest('.image-rotator').resetToNormal();
    });
</script>

Customization

Rotator is fully costomizable by css.

Usecases

Now this rotator is successfully being used on kudago.com for all items in catalog. And special slide option is used to show map for places. For example (hover address to see map)