Rails content slider, carousel, jQuery slideshow

29 October 2009

(slider, carousel, slideshow are all different names for those cool rotating images on websites) I did not write any of the libraries, I'm just showing you how to do use them.

Steps

On the view of the page where the slider will go

That partial

_slide_photo.html.erb *This format is from the Paperclip plugin, which I recommend for allowing admins to create their own slides. You'll want to make these images identical length and width If you want to skip the content management, you can just make a ul tag with a few li's holding images and move along.

In the controller

I'm using the field "on" to let an admin disable slides, and priority to set the order.

Download the easySlider 1.7 package

easySlider 1.7

Copy the javascript files in that download to your "public/javascripts" folder.

Include the javascript in your application.html.erb file head

*Potential pitfall--the easySlider demos use js/jsquery... and not javascripts/jquery... if you are copying directly from their docs

Add in the CSS

It's included in the easySlider download--you want the sections in the /* Easy slider */ parts The most important part is setting the height and width px's of the li section to the same as the images you are using.

Drop in the script that makes it go

I put mine at the bottom of the page that the slideshow appears on. This one is customized to turn off the left/right buttons, and go a little slower.