Slider Section Echo

Slider Section Echo features three synced sliders: a navigation slider that behaves as tabs, a content slider, and a background image slider with an overlay. When the user navigates to a new tab in the slider navigation, the content slider and background slider both change to reveal the associated content.

On mobile, the background slider changes position to live below the content slider, showing the images in full brightness without an overlay.

In its default state, the navigation accepts 2 to 3 “slides,” which would be synced to two or three slides in the other sliders as well. While you could expand this by changing the width of the main slider wrapper, there are two limitations: You’ll cover up more of the background slider and you’ll have trouble fitting the navigation options on mobile.

This slider was inspired by uber.com, who used this layout to show users their top three offers (drive, eat, ride). That’s the spirit we recommend using the slider in – trying to add too many items will cause issues and harm the cleanliness of the presentation.

Please note that this frame uses the Frames Slider component, so you must have the Slider activated on your install in order to use this frame.

Note: The user can keyboard navigate the tabs and the content within the tabs but can’t get from the selected tab into the selected content without proceeding through the navigation options. The same is true with the uber.com version. The proper semantic structure and proper aria labels are present, along with general keyboard navigation, but this frame isn’t as accessible as we’d like it to be. If can find a way to improve accessibility here, we will.