Preview Detail
Preview Detail
Preview Detail displays a carousel of images in an overlay modal with navigation controls and responsive slide configuration.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Modal Width | 90% max, full-screen on mobile |
| Image Max-width | 100% |
| Arrow Size | 32-40px |
| Animation | Slide transitions |
| Background | Semi-transparent backdrop |
Display States
Section titled “Display States”Hidden, triggered by user action
Modal overlay with carousel visible
Single image without navigation
Multiple images with prev/next controls
Carousel Configuration
Section titled “Carousel Configuration”| Setting | Value | Description |
|---|---|---|
dots | false | Hide pagination dots |
infinite | true | Enable loop navigation |
slidesToShow | 1 | One image visible |
slidesToScroll | 1 | Scroll one at a time |
arrows | false | Custom arrows used |
centerMode | false | No center padding |
| Option | Type | Description |
|---|---|---|
showPreviewDetail | boolean | Modal visibility state |
previewResponse | any | Image data for carousel |
selectResponse | any | Selected item data |
selected | number | Initial slide index |
Navigation Methods
Section titled “Navigation Methods”| Method | Action |
|---|---|
closePreview() | Close modal, emit status |
slickNav('next') | Go to next slide |
slickNav('prev') | Go to previous slide |
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Product image galleries
- Document previews
- Portfolio showcases
- Before/after comparisons
Best practices
Section titled “Best practices”| ✅ Do | ❌ Don’t |
|---|---|
| Provide close options | Trap user in modal |
| Show image count | Hide user position |
| Keyboard navigation | Mouse-only interaction |
| Optimize image sizes | Large file loads |
| Handle empty states | Blank modal on error |