Here is a small example of how to create a Carousel Effect by inheriting from Effect.Base, Gaiaware are using it for their landing page (to be released soon) at Gaia Ajax Widgets as an alternative to Flash.

Use as you wish!
We’ve MIT licensed the code for those that want to use it in their own projects…
It basically works more or less like a “normal scriptaculous effect” in that you instantiate it through New Gaia.Carousel Effect with the element and the options.

Usage is e.g.:


new Gaia.CarouselEffect($('myElement'), {scroll:500, max:1500});

The above code will scroll an element 500 pixels to the left unless the current scroll location of that element is more than 1500 pixels from before. If you combine a very large DIV or something with the overflow:hide style then you can get some very nice animations by using this code


// script.aculo.us CarouselEffect.js

// Copyright(c) 2008 - Gaiaware AS, http://ajaxwidgets.com
//
// CarouselEffect.js is freely distributable under the terms of an MIT-style license.
// For details, see the script.aculo.us web site: http://script.aculo.us/
Gaia.CarouselEffect = Class.create();
Gaia.CarouselEffect.prototype = Object.extend(new Effect.Base(), {
  initialize: function(element, options) {
    this.element = $(element);
    this.options = Object.extend({
      scroll:500,
      max:1500
    }, options || {});
    this.start(this.options);
  },

  setup: function() {
    this.orPlace = this.element.scrollLeft;
    if( this.orPlace > this.options.max )
      this.toPlace = 0;
    else
      this.toPlace = this.orPlace + this.options.scroll;
    this.amount = this.toPlace - this.orPlace;
  },

  update: function(position) {
    this.element.scrollLeft = this.orPlace + (this.amount * position);
  },

  finish: function(){
    this.element.scrollLeft = this.toPlace;
  }
});

It is probably very easy to make it bi-directional, though at the moment it will only scroll from left to right and then when coming to the end if will scroll all the way back to start again and start all over again.

PS!
(Thomas Fuchs) If you want to add up this to the core of your library, feel free to do so and also feel free to transfer the copyright from us to you as long as you give credits to http://ajaxwidgets.com (Gaiaware)