{"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\";\nimport { imagePlaceholders } from \"@/lib/media\";\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: imagePlaceholders[18],\n          label: \"Platform Launch - Q1 2024\",\n        },\n        {\n          src: imagePlaceholders[35],\n          label: \"AI Integration - Q2 2024\",\n        },\n        {\n          src: imagePlaceholders[52],\n          label: \"Enterprise Features - Q3 2024\",\n        },\n        {\n          src: imagePlaceholders[71],\n          label: \"Global Expansion - Q4 2024\",\n        },\n        {\n          src: imagePlaceholders[88],\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}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","slider","auto-advance","progress","animated","hero","onboarding","timed","transitions"],"performance":{},"importantUsageNotes":"Use 4-8 items in the 'items' array — each item requires a real image URL via the 'src' field and a short 'label' (keep labels under 40 characters to avoid truncation in the slide navigation tabs). DO NOT USE this block if you don't have at least 4 valid real images. Do not exceed 60 characters for the 'heading' prop and 130 characters for the 'subheading' prop. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:16.192Z"}