Rotating Banners
Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites
Rotating Banners is a simple and intuitive Drupal 7 module that enables you to quickly and easily add rotating banners to your theme or individual pages. There are other modules that have more features, but what makes Rotating Banners unique is the ease of setup and the degree of control it gives you over placement and display of the banners and the transitions between images.
Rotating Banners allows you to automatically cycle a large number of images through a gallery and control the transition from photo to photo. You can place a separate headline and text caption on each, and control how they are displayed. You can hyperlink each image to a separate page, so you can use the gallery for navigation or cataloging.
And you can create multiple rotating galleries on a single page, and specify exactly where they will appear. If the interval is identical for the various galleries, they will all switch on the same schedule. By staggering the transition time, you can have the images changing at different intervals.
Installation:
Rotating Banners requires two other modules and a pair of scripts to function.
The dependent modules are Media, http://drupal.org/project/media, and Styles, http://drupal.org/project/styles.
The two server scripts are jquery.cycle.all.min.js and jquery.easing.1.3.js.
The first script can be downloaded here: http://jquery.malsup.com/cycle/download.html.
Once you download it, rename it to jquery.cycle.js.
The second can be downloaded here: http://gsgd.co.uk/sandbox/jquery/easing/
Once you download it, rename it to jquery.easing.js.
Install rotating Banners through the Administration/Modules page.
Then copy both scripts to the following directory: …/sites/all/modules/rotating_banner/includes/.
This will create an interface in the Admin/Structure/Blocks menu.
Configuration
To set up a Rotating Banner, go to Administration/Structure/Blocks. At the top of the page, click on the link marked “Add a Rotating Banner.”
This will open a new pane entitled “Blocks.” In the Pane marked “Banner title,” enter the name of your new banner. Click the “Create” button. A page entitled ‘Rotating Banner: “Banner name” block’ will open. This is the heart of the Rotating Banners interface, and most of the configuration occurs on this page.
There are four sections: “Banner Images,” which controls the images displayed; Banner settings, which controls how the images are displayed; and
The top pane is entitled “Banner Images.” Click on it, and a link will appear entitled “Add a new slide to this banner.”
Clicking the link will open the “Create New Slide” window, as seen below.

When you have finished filling out the fields, click the “Save” button. You can then add another image by starting the process over again.
The Banner Settings pane allows you to configure the behavior of the Rotating Banner.

Click “Save Block” when you are finished and you’re Rotating Banner will be ready to go. To assign you banner to a region of your theme, go to the Administration/Structure /Blocks menu (you will end up there when you have finished saving you banner). Toward the bottom of the page, you will find a list of disabled blocks that will include your banner. Simply drag your banner to the region of the page on which you wan it to appear. Click “Save Blocks”, and you’re done.
Rotating Banners will work with the following image formats: jpg, jpeg, gif, and png. All image files must be smaller than 8MB.
To change the configuration of one of your Rotating Banners, go to the Administration/Structure/Blocks menu. To modify one of the images, or to add a new image, click on the “Banner Images” link. To modify the display settings, click the “Banner Settings” link. By default, the banner is applied to the default theme as a whole. To apply a Rotating Banner to an individual page or pages, go to the Administration/ Structure/Blocks menu, scroll to the entry for your banner, and click the “Configure” link. At the bottom of the page, click on the “Pages” tab.


Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion