Skip to content
An image carousel, or, rotating banner, for Radiant CMS sites
JavaScript Ruby
Find file
Pull request Compare This branch is 14 commits ahead of banane:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


= Carousel

A rotating banner for Radiant extensions. Based on "Infinite Carousel" by and includes JQuery 1.4.2. Version 2.0 of Infinite Carousel.
By Blazing Cloud, Inc (

To Install
1. In your vendor/extensions directory, enter:
git clone infinite_carousel

2. OPTIONAL: You can copy images to a radiant public image directory by typing, in your Radiant root:
rake radiant:extensions:infinite_carousel:copy_images
Or, you can use MediaMaid to get links to your images. 
Or, you can hand-code in the links to your images.

3. (back to required steps) In your radiant root directory, enter:
rake radiant:extensions:infinite_carousel:update

4. In the Radiant Admin UI interface, use the following tags:
<r:infinite_carousel_image src="/images/infinite_carousel/1.jpg" caption="The image" />
... iterate through as many carousel images as you want.

5. Make sure the pages that carry the carousel have a layout, that includes the following links in the header (in this order):
<script type="text/javascript" src="/javascripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.infinitecarousel2.js"></script>

<script type="text/javascript">
            /****   Override defaults here  ****
             * transitionSpeed : 250,//how fast the slides move
             * displayTime : 6000, //how long before the slides move
             * autoStart: false, //set to true if you want the carousel to start by default
             * textholderHeight : .2,
             * ... more options available for override, check out jquery.infinitecarousel.js

6. Lastly, ou must include css that gives your images height and width or this plugin will not work in webkit based browsers (safari/chrome/etc...)
<style type="text/css">

   //this is for webkit based browsers
   #infinite_carousel ul li img {

   //do this for firefox - it will center the image in the page while it loads
   #infinite_carousel > ul {
      left: 200px;
      list-style: none outside none;
      margin: 0;
      padding: 0;
      position: relative;
      width: 9999px;
Something went wrong with that request. Please try again.