MooTools

How to use

HTML

<div id="carousel">
  <div class="inner" style="width: 2000px">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
  </div>
</div>

CSS

div#carousel {
  overflow: hidden;
  width: 300px;
  height: 200px;
}

div#carousel div.inner {
  width: 600px;
}

div#carousel div.inner > div {
  float: left;
  width: 100px;
  height: 200px;
}

JS

myCarousel = new Fx.Scroll.Carousel('carousel',{
  mode: 'horizontal',
  onStart: function(){
    myCarousel.getCurrent().tween('color','#000');
  },
  onComplete: function(){
    myCarousel.getCurrent().tween('color','#fff');
  }
});

Methods

myCarousel.toNext();
myCarousel.toPrevious();
myCarousel.getCurrent(); // returns an element

View the MooDoc for more detailed documentation.

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.