{"success":true,"data":{"block":{"id":"carousel-auto-progress-slides","name":"Carousel Auto Progress Slides","title":"Carousel Auto Progress Slides","category":"Carousel","categorySlug":"carousel","description":"An auto-advancing carousel with animated progress indicators and smooth blur transitions between slides. Features centered headline, navigation controls, and visual progress dots that fill as each slide auto-advances.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289067/nc0w7rixu020dd88lny396d7t312/carousel-auto-progress-slides-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289068/p8gtmwv7jky6bbufqqd3v9bp99nx/carousel-auto-progress-slides-mobile.jpg"},"componentPath":"blocks/carousel/carousel-auto-progress-slides.tsx","code":"import { CarouselAutoProgressSlides } from \"@opensite/ui/blocks/carousel/carousel-auto-progress-slides\";\n\nexport default function Demo() {\n  return (\n    <CarouselAutoProgressSlides\n      heading=\"Product Evolution\"\n      subheading=\"Watch how our platform transforms businesses\"\n      pattern=\"gridFadeCenter\"\n      patternOpacity={1}\n      background=\"gray\"\n      items={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6\",\n          label: \"Platform Launch - Q1 2024\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52\",\n          label: \"AI Integration - Q2 2024\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c\",\n          label: \"Enterprise Features - Q3 2024\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw\",\n          label: \"Global Expansion - Q4 2024\",\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/4u3pi66nga47kc1th8tyqd3lpj28\",\n          label: \"Next Generation - 2025\",\n        },\n      ]}\n      autoAdvanceInterval={75}\n    />\n  );\n}","propsSchema":{"heading":{"type":"object","description":"Main heading content","typeLabel":"React.ReactNode","required":false},"subheading":{"type":"object","description":"Subheading/description text","typeLabel":"React.ReactNode","required":false},"items":{"type":"array","description":"Array of slide items","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"label":{"type":"object","description":"Slide label/alt text","typeLabel":"React.ReactNode","required":false},"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":"SlideItem"},"typeLabel":"SlideItem[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides items array)","typeLabel":"React.ReactNode","required":false},"autoAdvanceInterval":{"type":"number","description":"Auto advance interval in milliseconds","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},"headerClassName":{"type":"string","description":"Additional CSS classes for the header area","required":false},"headingClassName":{"type":"string","description":"Additional CSS classes for the heading","required":false},"subheadingClassName":{"type":"string","description":"Additional CSS classes for the subheading","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation area","required":false},"slideLabelClassName":{"type":"string","description":"Additional CSS classes for the slide label","required":false},"slideContainerClassName":{"type":"string","description":"Additional CSS classes for the slide container","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"exampleProps":{"heading":"Product Evolution","subheading":"Watch how our platform transforms businesses","background":"gray","pattern":"gridFadeCenter","patternOpacity":1,"items":[{"src":"https://toastability-production.s3.amazonaws.com/b555hwjt7ltr81et05v5254q1ak6","label":"Platform Launch - Q1 2024"},{"src":"https://toastability-production.s3.amazonaws.com/dvz0441h9fxjhh88lzqbwdoyxv52","label":"AI Integration - Q2 2024"},{"src":"https://toastability-production.s3.amazonaws.com/jhjfvkmdzktacyijd9fh6acc7o2c","label":"Enterprise Features - Q3 2024"},{"src":"https://toastability-production.s3.amazonaws.com/9covpitzpuuobkg1m4mfokpi0enw","label":"Global Expansion - Q4 2024"}],"autoAdvanceInterval":75},"dependencies":["@opensite/ui"],"tags":["carousel","slider","auto-advance","progress","animated","hero","onboarding","timed","transitions"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each SlideItem requires a 'src' absolute URL. Supports 3–8 slide items; too few items makes the progress indicator meaningless. 'autoAdvanceInterval' controls how quickly the progress dot depletes (milliseconds per tick, not total duration). Use 'heading' and 'subheading' to provide context above the carousel. Component fills min-h-screen — suitable for hero use.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}},"timestamp":"2026-06-27T20:11:22.232Z"}