Infinite Carousel

There have been umpty-million requests for this since I first launched Carousel for Freeway years ago. I noted that it would take a complete re-write of the underlying JavaScript to pull it off, and I was right. So here is how far I have gotten to date: no tabs, no previous/next controls, no “you are here” indicators of any type. Just a set of options for making a set of panes scroll at a specified interval across the screen.

All defaults, all the time

$('foo').autoGlide(); Animates horizontally, every three seconds, taking .5 seconds to animate, and “wraps around” seamlessly for that infinite loop everyone wants.

The same, only vertical

$('bar').autoGlide({orientation: 'vertical'}); Simply add the options hash to the function call, and specify the orientation.

All the options at the same time

$('baz').autoGlide({orientation: 'vertical', interval: 1.3, duration: 2, infinite: false}); This shows all of the available options, including infinite: false, which rather perversely returns the original Carousel “snap-back” behavior, should that be your favorite thing ever.

Messing with the timing

$('boo').autoGlide({interval: 4.5, duration: 0.1}); This example only changes the timing functions to show the level of control you have there.

What about the Action?

Well, I did mention I had only gotten so far, right? I still need to do some more work and refactor the code, plus it might be nice to have a pause on hover, and maybe some sort of navigation, too.

Meantime, if you are handy with the codes, you can use the JavaScript from this page, Protaculous, and a bit of clever inline construction in Freeway, instead of a fancy purpose-built Action. Well, Ernie can, anyway. To begin, view the source of this page. (In Safari 6, View / View Source has become Develop / Show Page Source.)

1. Draw a layered* HTML box where you expect the Carousel effect to appear. Make a note of the ID of this box, referred to as the Title in the Inspector.
2. Double-click inside that first box (so you get a flashing text cursor) and choose Insert / HTML Item from the main menu. This will become the “filmstrip” slider that will animate to cause the visual effect. All of your panes will be moved into this element later in the layout process.
3. Draw your first pane somewhere else on the page or pasteboard, and add your content to it. Use the same nested construction for this element as you would for a regular Carousel pane when using the current Action. Use the Item / Extended dialog, or my Add Selector Action to add the class name pane to the pane.
4. Once you have your first pane created, duplicate it as many times as you need, and alter each copy to be unique.
5. Now for the complicated, fussy fun part: assembly. Cut your first pane to the clipboard, double-click inside the inline HTML box you made in step 2, and paste the first pane as an inline child. Repeat with all of the other panes, until they are all stuffed inside that inline box. It’s important that you don’t use the Return key between pastes, just use the arrow keys to navigate the text cursor to be after the last inline pane before you paste the next one. You don’t need to worry about the dimensions of that box, or whether it grows to encompass everything inside it.
6. Click once on the outermost box you created in step 1. Use the Inspector to set its dimensions to be just large enough to show one of your panes. Set the Overflow picker to Hidden. When you click away from this box, all of the overflowed elements will be cropped away and disappear in Freeway.
7. Back in the top Function Body dialog in Protaculous, move to the end of the code you copied and pasted, and add a new line after it to start the effect. The most basic thing you could do is $('yourBoxName').autoGlide();. Use the code examples on this page to guide your hand in customizing the settings.

*Not strictly necessary that it be a CSS-positioned layer (it could also be inline), but it has to be a DIV, so it can’t be an HTML box drawn in “Table Layout” mode.