{"success":true,"data":{"block":{"id":"carousel-autoplay-progress","name":"Carousel Autoplay Progress","title":"Carousel Autoplay Progress","category":"Carousel","categorySlug":"carousel","description":"An Embla-powered carousel with autoplay functionality, animated progress bar, dot navigation, and play/pause controls. Features smooth transitions with visual feedback for autoplay timing.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289111/qb7qssmk2vb7d1ezhd4pedkas3b5/asdfasdfad-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289110/0x48eqle9zn1x4avfovlq6coy0vv/asdfasdfad-mobile.jpg"},"componentPath":"blocks/carousel/carousel-autoplay-progress.tsx","code":"import { CarouselAutoplayProgress } from \"@opensite/ui/blocks/carousel/carousel-autoplay-progress\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n return (\n \n

Mountain Expedition

\n

\n Discover breathtaking peaks and pristine wilderness trails\n

\n \n ),\n },\n {\n src: imagePlaceholders[28],\n alt: \"Urban Architecture\",\n content: (\n
\n

Urban Architecture

\n

\n Modern cityscapes showcasing cutting-edge design\n

\n
\n ),\n },\n {\n src: imagePlaceholders[45],\n alt: \"Coastal Sunset\",\n content: (\n
\n

Coastal Sunset

\n

\n Golden hour magic along pristine shorelines\n

\n
\n ),\n },\n {\n src: imagePlaceholders[61],\n alt: \"Forest Canopy\",\n content: (\n
\n

Forest Canopy

\n

\n Immerse yourself in ancient woodland ecosystems\n

\n
\n ),\n },\n {\n src: imagePlaceholders[78],\n alt: \"Desert Dunes\",\n content: (\n
\n

Desert Dunes

\n

\n Endless horizons and sculpted sand formations\n

\n
\n ),\n },\n {\n src: imagePlaceholders[94],\n alt: \"Northern Lights\",\n content: (\n
\n

Northern Lights

\n

\n Witness nature's most spectacular light show\n

\n
\n ),\n },\n ]}\n autoplayDelay={4000}\n options={{ loop: true }}\n />\n );\n}","propsSchema":{"slides":{"type":"array","description":"Array of slides","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"object","description":"Image alt text","typeLabel":"React.ReactNode","required":false},"content":{"type":"object","description":"Additional content below the image","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":"AutoplaySlide"},"typeLabel":"AutoplaySlide[]","required":false},"slidesSlot":{"type":"object","description":"Custom slot for rendering slides (overrides slides array)","typeLabel":"React.ReactNode","required":false},"options":{"type":"object","description":"Embla carousel options","typeLabel":"EmblaOptionsType","required":false},"autoplayDelay":{"type":"number","description":"Autoplay delay 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 carousel container","required":false},"trackClassName":{"type":"string","description":"Additional CSS classes for the slides track","required":false},"slideClassName":{"type":"string","description":"Additional CSS classes for individual slides","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image","required":false},"controlsClassName":{"type":"string","description":"Additional CSS classes for the controls area","required":false},"dotsClassName":{"type":"string","description":"Additional CSS classes for the dots navigation","required":false},"progressClassName":{"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},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","slider","autoplay","progress-bar","embla","hero","testimonials","features","controls"],"performance":{},"importantUsageNotes":"Use 4-8 slides in the 'slides' array — each slide requires a real image URL via the 'src' field. DO NOT USE this block if you don't have at least 4 valid real images. The optional 'content' slot beneath each slide can include a short title and description; keep titles under 40 characters and descriptions under 100 characters. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:09.436Z"}