Slider Section Echo


Three synced sliders, inspired by the home page, show the user your top three offers.

Slider Section Echo
Available for:
Buy Frames
Back to library


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, 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.

Query Loop Compatible


This frame uses the following locally scoped variables to make it easier for you to edit the style or behavior of this frame. Variables can be viewed or edited from the CSS tab.

Accessibility Notes

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 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.

Related Frames

No related frames.

Related Components


    Use the related frames section above to check FAQs for other frames related to this frame if you don't see your question here.