Skip to content
Edgar Gonzalez edited this page Jun 3, 2013 · 12 revisions

Welcome to the jQuery Rambling Slider wiki.

The jQuery Rambling Slider is a CoffeeScript improved modified version of the jQuery Nivo Slider by Gilbert Pellegrom, which is "The Most Awesome jQuery Image Slider". It includes some new options and methods to give the slider the ability to adapt different image sizes, flash support and transitions extensions.

You can read more about it on my blog.

How to use the jQuery Rambling Slider

The compiled JavaScript and CSS files, are in the assets/ directory. Those are assets/javascripts/jquery.rambling.slider.js and assets/stylesheets/jquery.rambling.slider.css for development, as well as assets/javascripts/jquery.rambling.slider.min.js and assets/stylesheets/jquery.rambling.slider.min.css for production. The images for the different themes are under assets/images.

Include the files (either development or production) in your html, and assuming you have something that resembles this:

<div id="slider">
  <img src="images/image1.jpg" alt="image1"/>
  <a href="#link"><img src="images/image2.jpg" alt="image2"/></a>
  <img src="images/image3.jpg" alt="image3"/>
  <img src="images/image4.jpg" alt="image4"/>
</div>

You can then initialize your slider with:

$(window).load(function(){
  $('#slider').ramblingSlider();
});

Note that it's set up in the load event from window, to ensure that the images are already loaded.

Examples

There are usage examples available in the examples/ directory. You might want to see default.html, adaptive.html and flash.html.

Contributing to the jQuery Rambling Slider

Read more about it in the Contributing to the jQuery Rambling Slider wiki page

Documentation

The documentation is available in this wiki. The pages include: