jQuery Rambling Slider A CoffeeScript improved version of the Nivo Slider

This is an example of a HTML caption with a link .

The jQuery Rambling Slider was born from the jQuery Nivo Slider, qualified by its own author as "the most awesome jQuery image slider". It is intended to be an expanded and improved version of its original self, and adds a number of customizations in order to achieve this.

It's very easy to use!

Sensible defaults

The slider shown above represents the default behavior of the slider:

$(function() {
  $('#sliderId').ramblingSlider();
});

By default, the slider looks pretty much like it's ancestor. It expects all images to be of the same dimension. It includes previous and next controls viewable on hover, as well as fixed navigation controls shown at the bottom.

The slider also shows a random transition effect between images and includes captions based on the title attributes of the displayed elements.

Configurable

You can set a wide range of options to customize the functionality of the image slider. Some of the important options include:

  • effect and theme
  • slices , boxRows and boxCols
  • directionNav and controlNav

It also supports including a flash animation as one or more slides.

Go to the Options wiki page on GitHub to find an extensive list of all the available options and values.

Extensible

You can define your own transition effects and your own themes. See Adding and Overriding Transitions for more information.

New Transitions

Some of the transition effects included on the jQuery Rambling Slider were not part of its original JavaScript counterpart jQuery Nivo Slider. We've taken it to the next level, adding more and more transitions. Here are some of our own:

  • sliceDownRandom , sliceDownOutIn , sliceDownInOut and the sliceDown group, which randoms between all sliceDown transitions.
  • sliceUpRandom , sliceUpOutIn , sliceUpInOut and the sliceUp group.
  • sliceUpDownRandom , sliceUpDownOutIn , sliceUpDownInOut and the sliceUpDown group.
  • sliceFadeRight , sliceFadeLeft , sliceFadeOutIn , sliceFadeInOut , sliceFadeRandom and the sliceFade group.
  • foldLeft , foldRandom , foldOutIn , foldInOut and the fold group.
  • slideInRight , slideInLeft and the slideIn group.
  • rolloverRight , rolloverLeft and the rollover group.
  • boxRainOutIn , boxRainInOut`
  • boxGrowOutIn , boxGrowInOut`

Ruby on Rails Integration

The jQuery Rambling Slider can be used within a Rails application using the rambling-slider-rails gem. This gem is designed to automate the usage of the slider on Rails, and provides an easy way to do it as well.

To find more information about how to use the ramlbing-slider-rails gem, go to the Rambling Slider Rails homepage or to the gem's repository on GitHub

*** Coming Soon: New Themes ***

We're working on new themes that ship together with the jQuery Rambling Slider. That way, we can provide several default options to our users, without them needing to develop their own custom theme.

Send us your ideas to development@ramblinglabs.com

Support

If you find any bug, feel free to report it through the project's GitHub issues.

You can also send us an email to development@ramblinglabs.com, with your questions and feature requests.

Fork me on GitHub