carouFredSel

This is a carousel style plugin implementing the awesome carouFredSel carousel library as a Views style plugin (and library). It is designed with the philosophy that the best way to implement a carousel app is to make it easy to do easy things, and to get out of your way if you want to do more advanced configuration.

This is a young module, contributions very welcome.

Why another carousel/slider module?

This is a fair question to ask, there are certainly already a number of slider/carousel modules out there. Here are some reasons this module was born, and why you might want to use it:

• carouFredSel is awesome. It's super easy but also flexible.
• It can be tricky to set up advanced configurations with many of the existing modules, and somewhat frustrating for those able to write some JS who have to reverse engineer how the module's work. This module aims to give JS/JSON-level control to those who can use it, and basic setting administration through the admin GUI for all.
• Some of the other carousel libs have issues with things like circular scrolling, infinite scrolling, offsets, etc. carouFredSel just works.

Specifying Advanced Options

Since many carouFredSel options can take a variety of value types, and implementing as a full GUI interface would be a behemoth undertaking and likely just get in the way, we've gone for a more lightweight approach with this module.

All options that can take more than one type of data (object, string or boolen, for instance) are implemented as textfields. Boolean values can be passed using the strings "true" and "false" (no quotes), numbers using numerical strings and objects can be passed by entering the number in the textfield (they are parsed using JSON parsing in the client), and objects can be parsed by entering the JSON directly into the textfield.

This allows you to access the full power of carouFredSel quite quickly. For example, a common setting for the "scroll" option might be

{ "items": 1, "onBefore": "homepageSlideOnBefore" }

There are a few specific points to note about this format:

1. This approach does slightly change the format of options from the carouFredSel docs. For example, instead of passing { visible: 3 } as the value for "items", you need to quote the property names: { "visible" : 3 }. This is because they are parsed as JSON.

2. Callback functions are specified as strings. The string should be the property name of a property on Drupal.caroufredsel.callbacks that is a function. In the above case, you might put code like this into a js file in your theme:

   (function($) {
   Drupal.caroufredsel.callbacks.homepageOnBefore = function(oldItems, newItems, newSizes, duration) {
   $(oldItems[0]).removeClass('current-slide');
   $(newItems[0]).addClass('current-slide');
   }
   })(jQuery)

Options that can take a callback are defined in the below array:

  var optsTakingCallbacks = {
    onCreate: [], // the onCreate option
    scroll: ["onBefore", "onAfter", "onEnd", "conditions"],
    auto: ["onBefore", "onAfter", "onEnd", "onPauseStart", "onPauseEnd", "onPausePause"],
    prev: ["onBefore", "onAfter", "onEnd"],
    next: ["onBefore", "onAfter", "onEnd"]
  };