Slideshow Component Examples
The Slideshow component provides an interactive way to showcase multiple images with corresponding content. It automatically manages the current slide state and provides smooth transitions between slides.
Basic Slideshow
The most common usage pattern with image on top and navigation below:
Data Flow Analysis
See exactly what sensitive data you're sending to vendors with real-time visibility.
Sensitive Data Exposure
Gain visibility into what your teams are sending to external AI APIs.
Compliance Evidence
Pass audits with push-button simplicity by generating definitive proof of data residency.
Slideshow with Navigation on Top
Use the pointsOnTop prop to place the navigation above the image:
Data Flow Analysis
See exactly what sensitive data you're sending to vendors with real-time visibility.
Sensitive Data Exposure
Gain visibility into what your teams are sending to external AI APIs.
Compliance Evidence
Pass audits with push-button simplicity by generating definitive proof of data residency.
Slideshow with Constrained Image Height
Use the maxHeight prop to control the maximum height of images:
Data Flow Analysis
See exactly what sensitive data you're sending to vendors with real-time visibility.
Sensitive Data Exposure
Gain visibility into what your teams are sending to external AI APIs.
Compliance Evidence
Pass audits with push-button simplicity by generating definitive proof of data residency.
Product Feature Showcase
Perfect for highlighting different features of a product:
Network Traffic Analysis
Monitor all encrypted traffic in real-time with kernel-level visibility.
AI-Powered Data Classification
Automatically identify PII, secrets, and sensitive data in your traffic.
Compliance Reporting
Generate audit-ready reports with one click to prove data residency.
Use Case Examples
Showcase different use cases with relevant screenshots:
Third-Party Data Risk
Identify and quantify the sensitive data you're sending to external vendors.
AI Data Exposure
Monitor what data your teams are sending to external AI services.
Compliance Evidence
Automatically generate proof of data residency for regulatory audits.
Component Props Reference
Slideshow Component
| Prop | Type | Default | Description |
|---|---|---|---|
maxHeight | Number | undefined | Maximum height in pixels for the image container |
pointsOnTop | Boolean | false | Whether to place navigation above the image |
Slide Component
| Prop | Type | Required | Description |
|---|---|---|---|
image | String | Yes | URL path to the slide image |
imageAlt | String | Yes | Alt text for accessibility |
title | String | Yes | Slide title (supports HTML) |
description | String | Yes | Slide description (supports HTML) |
Implementation Details
How It Works
- State Management: The Slideshow component uses Vue's provide/inject pattern to share the current slide state
- Automatic Selection: The first slide is automatically selected when the component mounts
- Click Navigation: Users can click on any slide navigation item to switch to that slide
- Responsive Design: The component automatically adapts to different screen sizes
CSS Classes
The component uses these key CSS classes:
screenshot: Applied to the image container for consistent stylingtext-grape-600: Active slide stylingtext-grey-600: Inactive slide stylingborder-b-grape: Active slide border styling
Accessibility Features
- Proper alt text for images
- Keyboard navigation support
- Screen reader friendly structure
- High contrast active states
Best Practices
Image Optimization
- Use appropriate image formats (PNG for screenshots, WebP for photos)
- Optimize images for web (compress without losing quality)
- Provide meaningful alt text for accessibility
- Use consistent aspect ratios when possible
Content Structure
- Keep titles concise and descriptive
- Use descriptions to provide additional context
- Ensure each slide has a clear purpose
- Maintain consistent content length across slides
Performance Considerations
- Lazy load images when possible
- Use appropriate image sizes for different screen resolutions
- Consider using next-gen image formats (WebP, AVIF)
Common Use Cases
- Product Demos: Showcase different features or screens
- Feature Comparisons: Highlight differences between options
- Process Flows: Walk through multi-step processes
- Before/After: Show transformations or improvements
- Portfolio Showcase: Display different projects or work examples
Troubleshooting
Common Issues
- Images not loading: Check image paths and ensure files exist
- Navigation not working: Verify all required props are provided
- Styling issues: Check for CSS conflicts with global styles
Debug Tips
- Use browser dev tools to inspect component state
- Check console for any JavaScript errors
- Verify image URLs are accessible
- Test with different screen sizes for responsive issues