Menu icon Foundation
Tabs element - how to animate & autoplay

Good morning,

I trying to figure out if I can use F5's tabs element to create an animated "Featured Articles" box similar to the one on http://www.worldmag.com/

A screenshot of worldmag.com "Featured Articles" box is shown below.

Tabs animate autoplay example

Please note that this box exhibits the following characteristics:
(#1) The transition from one featured article to another is animated.
(#2) IMPORTANT! The image/caption (at left) changes on a mouse-over event -- i.e., when you move your mouse over an article title.
(#3) IMPORTANT! The whole box "autoplays" so that a different image/caption is shown about every 5 seconds.

I have found a number of helpful posts on this forum about how to do (#1) with F5 tabs, but not how to do (#2) or (#3).

Should I look at using JavaScript callbacks to make the F5 tabs do what I want them to do?

Thanks for your help!

tabs

Good morning,

I trying to figure out if I can use F5's tabs element to create an animated "Featured Articles" box similar to the one on http://www.worldmag.com/

A screenshot of worldmag.com "Featured Articles" box is shown below.

Tabs animate autoplay example

Please note that this box exhibits the following characteristics:
(#1) The transition from one featured article to another is animated.
(#2) IMPORTANT! The image/caption (at left) changes on a mouse-over event -- i.e., when you move your mouse over an article title.
(#3) IMPORTANT! The whole box "autoplays" so that a different image/caption is shown about every 5 seconds.

I have found a number of helpful posts on this forum about how to do (#1) with F5 tabs, but not how to do (#2) or (#3).

Should I look at using JavaScript callbacks to make the F5 tabs do what I want them to do?

Thanks for your help!