Multiple Carousels

Instructions | Download Protaculous.fwactionb | Download Example Document

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. You may place this duplicate anywhere else on your page or pasteboard, it will not appear when the page is published. Change the content to create your second pane. Repeat until you have created all of the panes of your carousel.
5. Select the first pane (the one you drew where the effect should appear on your layout), and apply the Carousel Action to it. If you would like the Carousel to animate automatically when the page loads, you may set Auto-Glide to a pause time in seconds between panes.
6. Select each of the other panes in turn, and apply the Carousel Pane Action to them. Be sure to choose your desired “parent” Carousel using the picker in the Actions palette, particularly if you have more than one Carousel on the page.
7. 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 the direction you would like it to animate. Be sure to also choose the correct “parent” Carousel in the Actions palette.
8. (Optional) Draw tabs to select individual panes directly (these must also be graphic boxes or images). 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.)
9. If you would like to create text links in lieu of graphic button tabs, you may use the Carousel Text Tab Action as an inline Action. Double-click inside an HTML box so you see a flashing text cursor, then from the main menu choose Insert / Action Item / Carousel Text Tab. Use the Actions palette to enter the text you would like to appear within the link, and insert a space on either side of the Action-item in order to apply styling to the link text.
10. (Even more optional) Create a single CSS style with the Tag set to '.active' and the Name property left blank, and add a border or some other bit of style to set off the currently selected tab from the others. Because this is a Tag-only style, you will not (and should not) apply it to anything on your page. Just having it in the list of styles is enough for it to be published and to work correctly.
11. Repeat steps 1 - 10 as many times as you like to add additional carousels to the page.