Docu Slider
Interactive before/after slider testimonial with drag interaction.
testimonialsliderbefore-afterinteractive
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
beforeImage | string | https://images.unsplash.com/photo-1444419988131-046ed4e5ffd6?q=80&w=1170&auto=format&fit=crop | Before image source URL. |
afterImage | string | https://images.unsplash.com/photo-1600607686527-6fb886090705?w=1200&q=80 | After image source URL. |
beforeText | string | We were drowning in manual processes and messy spreadsheets. | Text displayed when slider is on before side. |
afterText | string | The transformation was instant. Efficiency up 400% | Text displayed when slider is on after side. |
backgroundColor | string | #18181b | Background color (hex, rgb, or hsl). |
beforeLabel | string | BEFORE | Before label text. |
afterLabel | string | AFTER | After label text. |
beforeLabelColor | string | #71717a | Before label background color (hex, rgb, or hsl). |
afterLabelColor | string | #10b981 | After label background color (hex, rgb, or hsl). |