index.html

<!-- Carousel -->
<div class="the_slideshow" id="carouselHome">
    <ul class="the_slider">
        <li>
            <a href="#ulala">
                <img alt="yeahhh" width="500" height="200" class="" src="http://placekitten.com/g/500/200" />
            </a>
        </li>
        <li>
            <a href="#ulala">
                <img alt="yeahhh" width="500" height="200" class="" src="http://placekitten.com/g/500/200" />
            </a>
        </li>
        <li>
            <a href="#ulala">
                <img alt="yeahhh" width="500" height="200" class="" src="http://placekitten.com/g/500/200" />
            </a>
        </li>
        <li>
            <a href="#ulala">
                <img alt="yeahhh" width="500" height="200" class="" src="http://placekitten.com/g/500/200" />
            </a>
        </li>
    </ul>
</div>

<!-- Tabs -->
<ul id="tabs">
    <li data-position="0"><a href="javascript:;">0</a></li>
    <li data-position="1"><a href="javascript:;">1</a></li>
    <li data-position="2"><a href="javascript:;">2</a></li>
    <li data-position="3"><a href="javascript:;">3</a></li>
</ul>

script.js

// Mootools - Carousel
/*
usage:
    var tabs, carousel;
    tabs = new CarouselTabs({tabsSelector:"#tabs li"});
    labels = new CarouselLabels(carousel);
    carousel = new Carousel({
        auto_slide:true,
        wrapperId:"works",
        plugins:[ tabs, labels ]
    });
*/
var Carousel = new Class({
    Implements : [ Options, Events ],
    options: {
        wrapperId: null,
        slideSelector: " > .the_slider",
        childSlideSelector: " > li",
        isPercent: true,
        tempo: 3000,
        duration: 800,
        auto_slide: true,
        mouseStop: true,
        // no need to initalize the next options
        num: 0,
        current: 0,
        mask_width: 0,
        slides: [],
        plugins: []
    },
    initialize : function(options) {
        this.setOptions(options);
        this.unit = (this.options.isPercent) ? '%' : 'px';
        if(this.options.wrapperId)
        {
            this.wrapper = $(this.options.wrapperId);
            if(this.wrapper)
            {
                this.current = 0;
                this.options.plugins.each(this.addListener, this);
                this.load();
                if (this.options.auto_slide) this.play();
                this.moveTo(0);
            }
            else console.log('Elemento não encontrado');
        }else console.log('Defina o ID do elemento');
    },
    addListener : function(observer) {
        observer.setCarousel(this);
        this.notify('listening');
    },
    notify : function(event) {
        this.options.plugins.each(function(plugin) {
            plugin.listen(event);
        });
    },
    play : function() {
        this.stop();
        this.timer = this.next.periodical(this.options.tempo, this);
    },
    stop : function() {
        clearInterval(this.timer);
    },
    load : function() {
        this.contentSlides = this.wrapper.getChildren(this.options.slideSelector);
        if(this.contentSlides.length > 0)
        {
            var self = this;
            this.theSlide = this.contentSlides[0];
            if(this.options.mouseStop)
            {
                this.theSlide.addEvents({
                    mouseenter: function(){
                        self.stop();
                    },
                    mouseleave: function(){
                        self.play();
                    }
                });
            }
            this.slides = this.theSlide.getElements(this.options.childSlideSelector);
            this.options.num = this.slides.length;

            this.theSlide.set('morph', { duration: this.options.duration, unit: this.unit });

            if(this.options.isPercent)
            {
                this.options.mask_width = 100;
            }
            else
            {
                this.options.mask_width = this.wrapper.getStyle('width');
                // this.wrapper.setStyle('width', this.slides[0].getSize().x * this.options.num);
            }
        }
        this.notify('load');
    },
    moveTo : function(index) {
        this.current = index;
        this.transition(this.current);
        this.notify('move');
    },
    transition : function(offset) {
        this.theSlide.morph({'left': (offset * (-this.options.mask_width)) });
    },
    next : function() {
        this.current++;
        if (this.current >= this.options.num) {
            this.current = 0;
        }
        this.moveTo(this.current);
        this.notify('next');
    },
    prev : function() {
        this.current--;
        if (this.current < 0) {
            this.current = this.options.num - 1;
        }
        this.moveTo(this.current);
        this.notify('prev');
    },
    manualPrev : function(index) {
        this.stop();
        this.prev();
        this.notify('manualprev');
    },
    manualNext : function(index) {
        this.stop();
        this.next();
        this.notify('manualnext');
    },
    manualMoveTo : function(index) {
        this.stop();
        this.moveTo(index);
        this.notify('manualmove');
    }
});

// Mootools - Carousel Listener
var CarouselObserver = new Class({
    carousel : null,
    setCarousel : function(carousel) {
        this.carousel = carousel;
    },
    listen : function(ev) {
        switch (ev) {
            case "load": this.load(); break;
            case "move": this.move(); break;
            case "next": this.next(); break;
            case "prev": this.prev(); break;
            case "listening": this.listening(); break;
            case "manualprev": this.manualprev(); break;
            case "manualnext": this.manualnext(); break;
            case "manualmove": this.manualmove(); break;
            default: break;
        }
    },
    load: function() {},
    move: function() {},
    next: function() {},
    prev: function() {},
    listening: function() {},
    manualprev: function() {},
    manualnext: function() {},
    manualmove: function() {}
});

// Mootools - Carousel Plugin - Tabs
var CarouselTabs = new Class({
    Extends : CarouselObserver,
    Implements : [ Options, Events ],
    options : {
        tabsSelector : ".tabs"
    },
    initialize : function(options) {
        this.setOptions(options);
        this.tabs = $$(this.options.tabsSelector);
    },
    listening: function(){
        var self = this;
        console.log(self,self.carousel);
        this.tabs.each(function(item, index){
            $(item).addEvent('click',function(ev){
                self.carousel.manualMoveTo(this.getAttribute("data-position"));
            })
        });
    },
    move : function() {
        this.tabs.each(function(tab) {
            tab.removeClass('current');
        });
        this.tabs[this.carousel.current].addClass('current');
    },
});

// Init Carousel
var the_tabs = new CarouselTabs({tabsSelector:"#tabs > li"});
var the_carousel = new Carousel({
    auto_slide:true,
    wrapperId:'carouselHome',
    plugins:[ the_tabs ]
});

style.scss

@import "compass";
//
//  Cross-browser inline-block.
//  @see http://www.quirksmode.org/css/display.html
//
%stitch-inline-block {
  display:inline-block;

	// IE7 fix
	*display:inline;
	*zoom:1;
}

@mixin inline-block {
	@extend %stitch-inline-block;
}

// Carousel
.the_slideshow{
    max-height: 200px;
    max-width: 500px;
    min-width: 960px;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    .the_slider {
        font-size: 0;
        height: 100%;
        left: 0;
        list-style: none;
        margin: 0;
        padding: 0;
        position: relative;
        width: 400%;
        > li {
            @include box-sizing(border-box);
            @include inline-block;
            // height: 100%;
            text-align: center;
            width: 25%;
            img{
                width: 100%;
                height: auto;
                display: block;
                margin: 0 auto;
            }
        }
    }
}