Installation
Run the following command
npx vibes@latest add slideshow
Usage
import { Slideshow } from '@/vibes/soul/sections/slideshow';function Usage() {return <Slideshow slides={slides} />;}export const slides = [ { title: 'Aero Dynamic', description: 'Designed for speed and comfort', image: { alt: 'alt', src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTo1MjA2ODIyNC1kZmNjLTRlNDgtODUwMi1lNGQyOTUwOWQzMzk=/aero-dynamic.jpeg', }, cta: { href: '#', label: 'Shop Now', }, }, { title: 'Accessible', description: 'Easy access to your gear', image: { src: 'https://storage.googleapis.com/s.mkswft.com/RmlsZTpjMzU2N2ExNy1kOGM2LTQzNzAtOWRkMC02YjEyNzZmNjA2MTg=/mini-bar-bag-7.jpeg', alt: 'alt', }, cta: { href: '#', label: 'Shop Now', }, }];
API Reference
SlideshowProps
| Prop | Type | Default |
|---|
className
| string
| |
slides*
| | |
playOnInit
| boolean
| true
|
interval
| number
| 5000
|
Slide
| Prop | Type | Default |
|---|
title*
| string
| |
description
| string
| |
showDescription
| boolean
| |
image
| | |
cta
| | |
showCta
| boolean
| |
Image
| Prop | Type | Default |
|---|
alt*
| string
| |
blurDataUrl
| string
| |
src*
| string
| |
CTA
| Prop | Type | Default |
|---|
label*
| string
| |
href*
| string
| |
variant
| ButtonLinkProps['variant']
| |
size
| ButtonLinkProps['size']
| |
shape
| ButtonLinkProps['shape']
| |
See ButtonLink for more details on the variant, size, and shape properties.
CSS Variables
This component supports various CSS variables for theming. Here's a comprehensive list.
:root { --slideshow-focus: var(--primary); --slideshow-mask: color-mix(in oklab, var(--foreground) 80%, transparent); --slideshow-background: var(--primary-shadow); --slideshow-title: var(--background); --slideshow-title-font-family: var(--font-family-heading); --slideshow-description: color-mix(in oklab, var(--background) 80%, transparent); --slideshow-description-font-family: var(--font-family-body); --slideshow-pagination: var(--background); --slideshow-play-border: color-mix(in oklab, var(--contrast-300) 50%, transparent); --slideshow-play-border-hover: color-mix(in oklab, var(--contrast-300) 80%, transparent); --slideshow-play-text: var(--background); --slideshow-number: var(--background); --slideshow-number-font-family: var(--font-family-mono);}
