Multiple Carousels

Instructions | Download Protaculous.fwactionb

Important Update

If you’ve tried Carousel already, please note: there’s been an important change made to support multiple Carousels on a single page. In order to add this feature, there has to be one more level of grouping when creating your carousel. Just as before, you group the layers that comprise the various “panes” of your carousel together. But after you have done that, you must also group each set of controls with the carousel that they drive. See the instructions below for more details about this change.

Instructions

1. Everything Must Be A Layer! Be sure that the big CSS Layout button is ON before you start, or go back and check the Layer checkbox in the Inspector for each element of your Carousel.
2. Draw an HTML box the size of your carousel area. Style it how you like, borders, background color, whatever you want.
3. Either click inside the box and enter inline content, or carefully draw child boxes within the carousel area to design the first pane of your carousel. Add images or type — whatever you like.
4. Select the HTML box, and duplicate it in place (0,0 offsets). Change the content to create your second pane. Repeat until you have stacked up all of the panes of your carousel.
5. Select all of the panes and group them together. With the group selected, apply the Carousel action to the group.
6. Draw your forward and back buttons, or design them in Photoshop. (These controls must be images.) Apply the Carousel Button action to each one, and select which direction you would like it to scroll.
7. (Optional) Draw tabs to select individual panes directly. Apply the Carousel Tab Action to each one, and choose the layer you would like to show from the picking list of panes. (At this point you may smack your forehead and go back to clean up the layer names, either using the Inspector or the Site panel.)
8. (Even more optional) Create a single CSS style named 'active' and add a border or some other bit of style to set off the currently selected tab from the others. Apply this style to a non-layered element on the pasteboard so that Freeway will publish it.
9. Select the entire package — the grouped stack of panes, the tabs, and the forward/back buttons — and group them all together. It is not necessary to apply any further Actions to this group.
10. Repeat as many times as you like, to add additional carousels to the page.