{"success":true,"data":{"block":{"id":"carousel-progress-slider","name":"Carousel Progress Slider","title":"Carousel Progress Slider","category":"Carousel","categorySlug":"carousel","description":"A context-based slider with animated progress bar indicators for each slide. Features auto-advancing slides with visual progress feedback and smooth transitions between content panels.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/295061/s0q5rrtbd7mhe49x1tnt2pj73lu7/carousel-progress-slider-desktop.png","mobile":"https://cdn.ing/assets/i/r/295062/ua68ex7qytsihfe42qzq1cppyg2j/carousel-progress-slider-mobile.png"},"componentPath":"blocks/carousel/carousel-progress-slider.tsx","code":"import { CarouselProgressSlider } from \"@opensite/ui/blocks/carousel/carousel-progress-slider\";\n\nexport default function Demo() {\n  return (\n    <CarouselProgressSlider\n      heading=\"Platform Capabilities\"\n      subheading=\"Discover what makes our solution the industry leader\"\n      slides={[\n        {\n          id: \"analytics\",\n          title: \"Advanced Analytics\",\n          description:\n            \"Gain deep insights into your business performance with real-time dashboards, custom reports, and predictive analytics powered by machine learning algorithms.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n        },\n        {\n          id: \"automation\",\n          title: \"Intelligent Automation\",\n          description:\n            \"Streamline repetitive tasks and workflows with smart automation tools that learn from your patterns and optimize themselves over time.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm\",\n        },\n        {\n          id: \"collaboration\",\n          title: \"Team Collaboration\",\n          description:\n            \"Bring your entire team together with integrated chat, video conferencing, file sharing, and project management tools in one unified platform.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh\",\n        },\n        {\n          id: \"integrations\",\n          title: \"Seamless Integrations\",\n          description:\n            \"Connect with 1,000+ apps and services through our robust API and pre-built integrations. Your tools work better together.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n        },\n        {\n          id: \"security\",\n          title: \"Enterprise Security\",\n          description:\n            \"Rest easy with SOC 2 Type II compliance, end-to-end encryption, SSO, and advanced access controls that protect your sensitive data.\",\n          image:\n            \"https://toastability-production.s3.amazonaws.com/4xjcgtlwseruezhoh3o1ga4umhj4\",\n        },\n      ]}\n      pattern=\"diagonalCrossBasic\"\n      patternOpacity={0.8}\n      background=\"gray\"\n      spacing=\"hero\"\n    />\n  );\n}","propsSchema":{"heading":{"type":"string","description":"Section title (renders as h2)","required":false},"subheading":{"type":"string","description":"Section subtitle/eyebrow (renders above title)","required":false},"slides":{"type":"array","description":"Array of slides","items":{"type":"object","description":"","fields":{"id":{"type":"string","description":"Unique identifier for the slide","required":true},"title":{"type":"object","description":"Slide title","typeLabel":"React.ReactNode","required":false},"description":{"type":"object","description":"Slide description","typeLabel":"React.ReactNode","required":false},"image":{"type":"string","description":"Image source URL","required":true},"className":{"type":"string","description":"Additional CSS classes for the slide","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false}},"typeLabel":"ProgressSlide"},"typeLabel":"ProgressSlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"duration":{"type":"number","description":"Duration for each slide in milliseconds","required":false},"fastDuration":{"type":"number","description":"Fast forward duration in milliseconds","required":false},"vertical":{"type":"boolean","description":"Whether to use vertical progress bars","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the container","required":false},"contentClassName":{"type":"string","description":"Additional CSS classes for the content grid","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image area","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation area","required":false},"buttonClassName":{"type":"string","description":"Additional CSS classes for the navigation buttons","required":false},"progressBarClassName":{"type":"string","description":"Additional CSS classes for the progress bar","required":false},"optixFlowConfig":{"type":"object","description":"OptixFlow image optimization configuration","fields":{"apiKey":{"type":"string","description":"API key for OptixFlow service","required":true},"compression":{"type":"number","description":"Compression level (0-100)","required":false}},"typeLabel":"OptixFlowConfig","required":false},"background":{"type":"string","description":"Background style for the section","typeLabel":"SectionBackground","required":false},"spacing":{"type":"object","description":"Vertical spacing for the section","fields":{},"typeLabel":"SectionSpacing","required":false},"pattern":{"type":"object","description":"Optional background pattern name or URL","fields":{},"typeLabel":"PatternName","required":false},"patternOpacity":{"type":"number","description":"Pattern overlay opacity (0-1)","required":false}},"exampleProps":{"heading":"Platform Capabilities","subheading":"Discover what makes our solution the industry leader","background":"gray","spacing":"hero","pattern":"diagonalCrossBasic","patternOpacity":0.8,"duration":8000,"slides":[{"id":"analytics","title":"Advanced Analytics","description":"Gain deep insights into your business performance with real-time dashboards.","image":"https://cdn.ing/assets/i/r/308196/g6bbn73f7gxal82uu49m9prfd0u8/workplace-in-cafe.webp"},{"id":"automation","title":"Intelligent Automation","description":"Streamline repetitive tasks with smart automation tools that learn over time.","image":"https://toastability-production.s3.amazonaws.com/kh1p8y15v55ctp5ulobm4pd77etm"},{"id":"collaboration","title":"Team Collaboration","description":"Bring your entire team together with integrated communication tools.","image":"https://toastability-production.s3.amazonaws.com/gg5qnvb4nsl2k3g4dw4ls8bsllwh"}]},"dependencies":["@opensite/ui"],"tags":["carousel","progress","slider","auto-advance","onboarding","walkthrough","features","timed","indicators"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each ProgressSlide requires 'id' string and 'image' absolute URL. Supports 3–6 slides; more slides make individual progress bars hard to read. 'duration' is the auto-advance period per slide in milliseconds (default 8000). 'vertical' switches progress indicators to fill vertically instead of horizontally. 'heading' and 'subheading' are plain strings (not ReactNode) and render via Section title/subtitle. Play/pause button renders bottom-left on the image panel.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}},"timestamp":"2026-06-27T20:04:18.295Z"}