Nivo jQuery Image Slider

This is an example of how you can easily use the Nivo jQuery Image Slider to create an image slideshow with FlexibleList. This nice javascript is very simple to use and after you have downloaded this example you can create your slideshow just by adding items on your page and in the content area of each item you put one image and set the size of each image to the same size.

EagleGullHouse FinchSacred IbisSong Sparrow

How to create the slideshow


  1. Apply the style Nivo jQuery Image Slider.flstyle to your FlexibleList page
  2. Add a new item to your FlexibleList page
  3. Drop an image into the content area of that item
  4. Double-click on the image to open the image inspector in RapidWeaver
  5. Adjust the size of the image so that it matches all the other images in the slideshow (not necessary if they are already in the same size)
  6. Repeat step 2-5 for each image you want to add
  7. Adjust the parameters for the slideshow in Setup->Advanced->Header

If you want to create and apply a new style for your slideshow then remove the reference to the file custom-nivo-slider.css in the Setup->Advanced->Header and replace it with your own CSS file.

PS: If you like this example and you use it for yourself or a client I suggest that you send a small donation to the creator of the Nivo jQuery Image Slider. DS.

Images from http://www.freedigitalphotos.net/