{"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/308426/2u89xyrxy74ibe0330mofbfs8z4v/carousel-autoplay-progress-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/308425/eak7nsljk5g806pkz1ghpwkdkvsy/carousel-autoplay-progress-mobile.jpg"},"componentPath":"blocks/carousel/carousel-autoplay-progress.tsx","code":"import { CarouselAutoplayProgress } from \"@opensite/ui/blocks/carousel/carousel-autoplay-progress\";\n\nexport default function Demo() {\n  return (\n    <CarouselAutoplayProgress\n      slides={[\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac\",\n          alt: \"Mountain Expedition\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Mountain Expedition</h3>\n              <p className=\"text-sm\">\n                Discover breathtaking peaks and pristine wilderness trails\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9\",\n          alt: \"Urban Architecture\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Urban Architecture</h3>\n              <p className=\"text-sm\">\n                Modern cityscapes showcasing cutting-edge design\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz\",\n          alt: \"Coastal Sunset\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Coastal Sunset</h3>\n              <p className=\"text-sm\">\n                Golden hour magic along pristine shorelines\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv\",\n          alt: \"Forest Canopy\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Forest Canopy</h3>\n              <p className=\"text-sm\">\n                Immerse yourself in ancient woodland ecosystems\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/betxbx61fkijt0aygineplf489ze\",\n          alt: \"Desert Dunes\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Desert Dunes</h3>\n              <p className=\"text-sm\">\n                Endless horizons and sculpted sand formations\n              </p>\n            </div>\n          ),\n        },\n        {\n          src: \"https://toastability-production.s3.amazonaws.com/1xdx70c7gp9l883soyh5d3exesvt\",\n          alt: \"Northern Lights\",\n          content: (\n            <div className=\"mt-2\">\n              <h3 className=\"font-semibold text-lg\">Northern Lights</h3>\n              <p className=\"text-sm\">\n                Witness nature's most spectacular light show\n              </p>\n            </div>\n          ),\n        },\n      ]}\n      autoplayDelay={7000}\n      options={{ loop: true }}\n      background=\"dark\"\n      pattern=\"gridFadeTopRight\"\n      patternOpacity={0.15}\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}},"exampleProps":{"background":"dark","pattern":"gridFadeTopRight","patternOpacity":0.15,"options":{"loop":true},"autoplayDelay":7000,"slides":[{"src":"https://toastability-production.s3.amazonaws.com/zykfhuapdqzu94ee1535gsgnvyac","alt":"Mountain Expedition"},{"src":"https://toastability-production.s3.amazonaws.com/hu4gmd93sp95wdyr9qijze0rgim9","alt":"Urban Architecture"},{"src":"https://toastability-production.s3.amazonaws.com/90rcw2mljzpeuxlac8q77mor15xz","alt":"Coastal Sunset"},{"src":"https://toastability-production.s3.amazonaws.com/9797jh6slgbf9oq6lzlimcdiuziv","alt":"Forest Canopy"}]},"dependencies":["@opensite/ui"],"tags":["carousel","slider","autoplay","progress-bar","embla","hero","testimonials","features","controls"],"performance":{},"importantUsageNotes":"All media src values must be absolute URLs to real assets; relative paths and placeholder media variables are not allowed. Each AutoplaySlide requires a 'src' absolute URL. Supports 3–10 slides for meaningful autoplay navigation. 'autoplayDelay' is in milliseconds (default 5000). The progress bar animates between dots indicating time until next slide. Play/pause toggle is rendered to the right of the progress bar.","usageRequirements":{"requiredProps":[],"propConstraints":{},"mediaSlots":{},"requiresSiteCapabilities":["media_library"]}}},"timestamp":"2026-06-27T20:07:00.667Z"}