Slider
21
Save vertical space with interactive SaaS Slider patterns. Use these for testimonials, product screenshots, or feature highlights to keep your marketing page compact and interactive.
Figma file available
.webp)
Related patterns
A slider or carousel presents a sequence inside a limited area. It can help visitors browse customer stories, product news, or other related items without making a page much longer. It also hides content, creates navigation work, and can make the most important message depend on which item happens to be visible.
Design the sequence around a reason to browse. If every card is essential to understanding the product, a carousel may create unnecessary uncertainty. If each card is an independent example and the first one already explains the section, controlled browsing can be a reasonable tradeoff.
Decide what deserves to remain outside the sequence
Put the section's core meaning in a persistent heading or introduction. Visitors should know what they are browsing before operating arrows. A customer-story sequence needs a clear promise about whose experience it presents; a news sequence needs a recognizable topic or recency context.
Do not hide a required pricing detail, warning, or primary explanation on a later slide. The interface cannot assume everyone will move through the entire sequence. A first card should be representative, but it should not carry information that changes the meaning of an earlier claim only after several interactions.
Treat the carousel as a way to explore related examples rather than a way to fit an entire page into one component. Compare it with a grid or a short vertical list. The better option is the one that helps visitors find useful content with a manageable amount of navigation.
Use visible continuation to suggest more content
The WhatsApp capture places a persistent heading and paired arrow controls on the left. To the right, one news card is fully visible while part of the next card extends beyond the captured edge. That partial card is a spatial cue that the section continues horizontally.
The first visible card includes a headline, short excerpt, and a Read More action. Those elements make it useful before anyone advances the sequence. The screenshot does not prove swipe support, automatic movement, or the behavior of the arrows. It demonstrates a layout that communicates both a complete item and the presence of another.
Partial visibility works best when the clipped item is clearly a continuation, not an accidental layout error. Leave enough of it visible to establish that relationship. On narrow screens, avoid clipping the primary card's text or action merely to preserve the same visual proportion as desktop.
Match the card structure to the content being compared
In the Wise capture, a large heading and directional controls sit beside tall customer-story cards. One card combines a portrait, a quotation, and a Watch video action; a neighboring card is partly visible and has a different visual treatment. The cards share a consistent outer structure even though their evidence differs.
That stable structure makes movement between stories easier to anticipate. It does not require every story to have the same medium. A video story and a written review can coexist if their actions clearly explain what opens. Do not make a button labeled as a story unexpectedly start playback without a meaningful indication.
Choose a consistent amount of information for the browsing stage. A card can summarize a longer article, but it should not contain a dense article squeezed into a fixed-height box. When quotation lengths vary, edit the displayed excerpts responsibly or allow a layout that accommodates them without hiding attribution or actions.
Make directional controls easy to interpret
Previous and next controls should look operable, have clear accessible names, and remain in a stable location. A decorative arrow near a heading can be mistaken for an illustration. A control that moves with every differently sized slide makes browsing more difficult than necessary.
Communicate boundaries. If the sequence ends, indicate that the next action is unavailable rather than letting the visitor wonder whether it failed. If the sequence loops, consider whether that behavior will confuse someone trying to determine how many items exist. Looping is not automatically the most useful choice for editorial content.
Pagination can help show position, but a row of tiny dots becomes hard to operate and interpret as the sequence grows. A concise item count or a route to a complete collection may be more informative. Use labels when the slides represent named categories rather than an interchangeable set of cards.
Let visitors control the reading pace
Manual navigation usually gives readers a predictable opportunity to finish a quotation or inspect an image. Automatic movement creates a timing problem: the interface decides how long each person has to read. This is especially awkward for dense text, unfamiliar language, or content with embedded actions.
If automatic movement is part of the design, provide a discoverable way to pause it and consider how interaction, focus, and reduced-motion preferences should affect it. Do not assume that a pause on pointer hover alone covers everyone who needs more time. These are requirements to evaluate in your implementation, not behaviors established by the two static captures.
Keep transitions modest enough that the visitor can follow the change. The sequence should communicate movement without demanding attention from the rest of the page. Avoid repeatedly shifting a large section while someone is reading adjacent content or preparing to activate a link.
Preserve context after a visitor opens an item
When a card leads to a story, article, or video, consider the return journey. A person who closes a detail view should be able to resume browsing near the item they selected. Resetting to the first card makes exploration feel repetitive, particularly when the sequence is long.
Separate the action that advances the carousel from the action that opens a card. A horizontal gesture should not accidentally activate a story link. Likewise, a click on a clearly labeled detail action should not merely advance to another item. The visitor's intention should determine which change occurs.
If content is loaded progressively, provide meaningful loading and failure states. Keep existing cards available when a later request fails. A section with a working first story should not disappear because an additional story could not load. Explain the problem near the affected area and offer an appropriate retry.
Adapt the sequence for touch, keyboard, and narrow screens
Provide more than a gesture-only route through content. Touch users may infer a horizontal swipe from the partial next card, but keyboard users need operable controls and a coherent focus order. Make it clear which actions belong to the currently available content.
Avoid allowing focus to disappear into an offscreen card with no visible indication of where it went. When a focused element becomes visible, the movement should preserve context rather than unexpectedly jumping to an unrelated section. Review the order of the heading, navigation controls, cards, and any route to the complete collection.
On mobile, a single readable card can be more useful than a shrunken desktop arrangement. Preserve legible text and practical control sizes. Test long titles and translated labels so that a fixed-height card does not clip the information needed to decide whether to open it.
Keep the carousel from obscuring content hierarchy
The most prominent card often becomes the de facto recommendation. Choose its position intentionally rather than relying only on publication order. If relevance depends on the visitor's context, consider a clear category or filter before introducing personalized ordering that may be difficult to understand.
Do not use motion or oversized controls to make a secondary content section compete with the primary action of the page. A testimonial sequence should support the argument nearby. A news carousel should help people discover updates, not interrupt the explanation they came to read.
Review the component in the full page. Two or three independent carousels can create repeated sideways navigation and make the page feel harder to scan. Sometimes one curated story plus a link to the full collection communicates more than several rotating panels.
Evaluate discovery beyond arrow clicks
Arrow activation shows interaction, but it does not establish that someone found useful content. Observe whether visitors understand the section, identify a relevant item, and open it when that is their goal. Also check whether important later cards are effectively invisible to most people.
Test the first and last positions, rapid navigation, return from a detail view, missing images, and varying card lengths. Verify that the correct content and actions remain associated during transitions. A polished movement animation cannot compensate for a button that opens the previous card's destination.
Use the SaaSFrame slider collection to compare news cards, customer stories, and testimonial sequences. Look for the information hierarchy and navigation cues that fit your content, then assess whether a carousel improves discovery compared with a simpler list.
Questions to resolve before choosing a carousel
How many slides should a carousel contain? Use a sequence visitors can reasonably explore. If the collection is large, provide a complete listing or search route instead of making repeated arrow presses the only way to find an item.
Should the next card be partially visible? It can communicate continuation effectively, as the captures show. Preserve a complete, readable primary card and check that the clipped neighbor looks intentional at every supported width.
Is a carousel suitable for essential information? Be cautious when comprehension depends on later slides. Keep required explanations and consequential details persistently visible, and use the sequence for material visitors can explore independently.