Spin 0.4

This is a port of jQuery Orbit http://www.zurb.com/playground/orbit-jquery-image-slider



Details

Author
Jakob Holmelund
Current version
0.4
GitHub
jakobholmelund/SpinSlider
Downloads
5859
Category
Widgets
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.4.3: [Class, Element.Style, Fx.Tween]

How to use

<script type="text/javascript">
    window.addEvent("domready", function() {
        $('#featured').spin();
    });
</script>

Advanced Use

<script type="text/javascript">
window.addEvent("domready", function() {
     $('#featured').spin({
          transition: "horizontal-push",//fade, horizontal-slide, vertical-slide, horizontal-push
            transitionOption: {transition:"linear",duration:600},
            timer: true,// true or false to have the timer
            advanceSpeed: 4000,// if timer is enabled, time between transitions
            pauseOnHover: false,// if you hover pauses the slider
            startClockOnMouseOut: true,// if clock should start on MouseOut
            startClockOnMouseOutAfter: 1000,// how long after MouseOut should the timer start again
            directionalNav: true,// manual advancing directional navs
            captions: true,// do you want captions?
            captionTransition: "fade",//fade, slideOpenH , slideOpenV, followSlide,none
            captionTransitionOption: {transition:"linear",duration:600},// fade, slideOpen, none
            bullets: true,// true or false to activate the bullet navigation
            bulletThumbs: false,// thumbnails for the bullets
            bulletThumbLocation: '',// location from this file where thumbs will be
            afterSlideChange: function(){}// empty function
        });
    });
</script>

<div id="featured"> 
    <div class="content" style="" rel="Caption 1">
            <h1>Orbit does content now.</h1>
            <h3>Highlight me...I'm text.</h3>
    </div>
    <a href=""><img src="dummy-images/overflow.jpg" rel="Caption 2" /></a>
    <img src="dummy-images/captions.jpg" rel="Caption 3" />
    <img src="dummy-images/features.jpg"  />
</div>

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus