Formally the Rotatr stack developed by Aaron Marquez of StackManiac, the rebranded Rotator stack has been completely overhauled with a new Stacks 3 editing interface, revised backend source code and several new settings. Rotator is ideal in situations where you need to get a basic text or image slider setup; and you don't care for advanced features like captions, thumbnails, jazzy animation effects and thumbnails. The total sourcecode size of Rotator (excluding jQuery) is a fraction over 30 KB.

Rotator is based on source code from the excellent opensource Owl Carousel plugin. The option is provided in Rotator to display pagination bullets; which can have their colours changed in the stack settings. Rotator will happily rotate its way through a broad choice of different content types, including static images, styled text, responsive columns, warehoused images, markdown and basic HTML code. An unlimited number of items can be added to Rotator, and dragged and rearranged into any order. As a bonus, images can have links applied to them, so Rotator can form an effective method of website navigation. Rotator resizes itself automatically to fit items of different heights.

Examples

Here are two simple examples of the Rotator stack in action. The first example uses images and buttons. The second example uses simple blocks of text and a pagination bullets. We've restricted the maximum width of the Rotator stacks to 1000px, using the free UsefulStack.

Setup

Follow these instructions for getting a Rotator stack working in you webpage:
  1. Once installed into Stacks 3, drag and drop a Rotator stack into your page
  2. Click the blue '+' button shown in edit mode, to add items to your slider
  3. Drag and drop additional stacks (like text or images) into the drop-zones shown in each item
  4. Change any of the settings shown in the Rotator stack
  5. Preview your page. Publish when done.

As always, hovering your mouse cursor over settings in edit mode will display an informational tooltip about what each setting does and any important information.

You can use multiple Rotator stacks on the same page. However as always, we recommend against ignoring the 'one effect per page' rule and using a multitude of different animation stacks on the same page. This can otherwise have a very detrimental effect on page loading speed and may introduce compatibility issues. Most expert web designers work by the "less is more" protocol!

Supported content / stack types

We support all basic stack and content types in Rotator; predominantly those relating to text and static images. We do not officially support things like tabs, accordions, other slider stacks or video. The emphasis of Rotator is on simplicity. Other stacks we provide (like StackSlider) have support for far more content types and things like video.

Using warehoused images

You can use images in Rotator that are stored outside of RapidWeaver, in any public location like an image warehouse. Our example published above makes use of warehoused images. To do so, add HTML stacks into each Rotator item. Then use standard HTML image markup, as documented here.

Optimising images

For best results, always optimise your images before putting them inside Rotator or uploading them to your web server. Images can be optimised in the following ways:
  1. Crop or resize images to the desired size in photo editing software like Photoshop, Pixelmator, Acorn, Gimp or DropFix
  2. Save images in either PNG or JPG format, at 72 dpi.
  3. Put images through ImageOptim to delete surplus meta data and other information not required
  4. Aim towards keeping each image less-than 200 kb in size. Images with a file size greater than this may not display on some smartphones and other lower-powered devices.