{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[13],\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: imagePlaceholders[39],\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: imagePlaceholders[57],\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: imagePlaceholders[76],\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: imagePlaceholders[101],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","progress","slider","auto-advance","onboarding","walkthrough","features","timed","indicators"],"performance":{},"importantUsageNotes":"Ensure to generate succinct titles and descriptions for each of the 'slides' since too much content will distort the layout. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:39:47.829Z"}