MooShell

• Run
• Edit

• Result
• JavaScript
• CSS
• HTML

var horizontal;
var vertical;

window.addEvent('domready',function(){
    
    horizontal = new Fx.Scroll.Carousel('horizontal',{
        mode: 'horizontal',
        onStart: function(){
            horizontal.getCurrent().tween('color','#000');
        },
        onComplete: function(){
            horizontal.getCurrent().tween('color','#fff');
        }
    });
    
    vertical = new Fx.Scroll.Carousel('vertical',{
        mode: 'vertical',
        onStart: function(){
            vertical.getCurrent().tween('color','#000');
        },
        onComplete: function(){
            vertical.getCurrent().tween('color','#fff');
        }
    });
    
    $('next').addEvent('click', function(){
        horizontal.toNext();
        vertical.toNext();
    });
    
    $('previous').addEvent('click', function(){
        horizontal.toPrevious();
        vertical.toPrevious();
    });
    
    $('loopOnScrollEnd').addEvent('change',function(){
        var bool = (this.value == 'true') ? true : false;
        horizontal.options.loopOnScrollEnd = bool;
        vertical.options.loopOnScrollEnd = bool;
    });
    
    var events = {
        onNext: function(){ $('onNext').highlight(); },
        onPrevious: function(){ $('onPrevious').highlight(); },
        onLoop: function(){ $('onLoop').highlight(); },
        onPreviousLoop: function(){ $('onPreviousLoop').highlight(); },
        onNextLoop: function(){ $('onNextLoop').highlight(); }
    };
    
    horizontal.addEvents(events);
    vertical.addEvents(events);

});

div#horizontal {
    overflow: hidden;
    width: 435px;
    border-top: 0;
    height: 100px;
    margin-bottom: 20px;
}

div.carousel p {
    width: 145px;
    height: 100px;
    padding: 0px;
    margin: 0px;
    font-size: 50px;
    line-height: 100px;
    color: #fff;
    text-align: center;
}

div#horizontal p {
    float: left;
}

div#horizontal div.inner {
    width: 870px;
}

div#vertical {
    height: 300px;
    width: 145px;
    float: left;
    overflow: hidden;
    margin-right: 20px;
}

/* @group global */

body {
    font-family: Helvetica, arial;
    background: #fff;
}

h1 {
    color: #0094d5;
}

h2 {
    margin-top: 20px; 
    color: #43aa38;
}

a {
    color: #0094d5;
}

a:visited, a:hover {
    color: #00577e;
}

.red {
    background: #e40053;
}

.blue {
    background: #0094d5;
}

.green {
    background: #43aa38;
}

    <h1>Fx.Scroll.Carousel</h1>
    <div id="horizontal" class="carousel">
        <div class="inner">
            <p class="red">1</p>
            <p class="green">2</p>
            <p class="blue">3</p>
            <p class="red">4</p>
            <p class="green">5</p>
            <p class="blue">6</p>
        </div>
    </div>

    <div id="vertical" class="carousel">
        <p class="red">1</p>
        <p class="green">2</p>
        <p class="blue">3</p>
        <p class="red">4</p>
        <p class="green">5</p>
        <p class="blue">6</p>
    </div>
    
    
    <h2>Events</h2>
    <p>
        <span id="onNext">next</span>
        <span id="onPrevious">previous</span>
        <span id="onLoop">loop</span>
        <span id="onNextLoop">nextLoop</span>
        <span id="onPreviousLoop">previousLoop</span>
    </p>

    <h2>Methods</h2>
    <p>
        <button id="next">toNext</button>
        <button id="previous">toPrevious</button>
    </p>
    
    <h2>Options</h2>
    <p>
        loopOnScrollEnd: <select id="loopOnScrollEnd">
            <option selected="selected">true</option>
            <option>false</option>
        </select>
    </p>