{"success":true,"data":{"block":{"id":"carousel-gallery-thumbnails","name":"Carousel Gallery Thumbnails","title":"Carousel Gallery Thumbnails","category":"Carousel","categorySlug":"carousel","description":"A gallery carousel with main image display, thumbnail navigation strip, keyboard navigation support, and auto-play functionality. Features smooth slide transitions with caption overlay and responsive thumbnail grid.","thumbnail":{"desktop":"https://cdn.ing/assets/i/r/289204/zu4idgda2ywsx08gps209prl3tvl/carousel-gallery-thumbnails-desktop.jpg","mobile":"https://cdn.ing/assets/i/r/289205/j55tdxyy1l8bpftgu06dcxmj9fs7/carousel-gallery-thumbnails-mobile.jpg"},"componentPath":"blocks/carousel/carousel-gallery-thumbnails.tsx","code":"import { CarouselGalleryThumbnails } from \"@opensite/ui/blocks/carousel/carousel-gallery-thumbnails\";\nimport { imagePlaceholders } from \"@/lib/media\";\n\nexport default function Demo() {\n  return (\n    <CarouselGalleryThumbnails\n      images={[\n        {\n          src: imagePlaceholders[14],\n          alt: \"Modern minimalist living room with floor-to-ceiling windows\",\n        },\n        {\n          src: imagePlaceholders[29],\n          alt: \"Gourmet kitchen with marble countertops and custom cabinetry\",\n        },\n        {\n          src: imagePlaceholders[41],\n          alt: \"Luxurious master bedroom with city skyline views\",\n        },\n        {\n          src: imagePlaceholders[58],\n          alt: \"Spa-inspired bathroom with rainfall shower and soaking tub\",\n        },\n        {\n          src: imagePlaceholders[66],\n          alt: \"Private rooftop terrace with outdoor entertainment area\",\n        },\n        {\n          src: imagePlaceholders[82],\n          alt: \"Home office with built-in shelving and natural light\",\n        },\n        {\n          src: imagePlaceholders[97],\n          alt: \"Elegant dining room with designer lighting fixtures\",\n        },\n        {\n          src: imagePlaceholders[108],\n          alt: \"Fitness center with state-of-the-art equipment\",\n        },\n      ]}\n      autoPlay\n      autoPlayInterval={6000}\n      showThumbnails={true}\n      pattern=\"squareAltGrid\"\n      patternOpacity={0.25}\n      background=\"dark\"\n    />\n  );\n}","propsSchema":{"images":{"type":"array","description":"Array of gallery images","items":{"type":"object","description":"","fields":{"src":{"type":"string","description":"Image source URL","required":true},"alt":{"type":"object","description":"Image alt text/caption","typeLabel":"React.ReactNode","required":false},"width":{"type":"number","description":"Image width","required":false},"height":{"type":"number","description":"Image height","required":false},"className":{"type":"string","description":"Additional CSS classes for the image","required":false},"imageClassName":{"type":"string","description":"Additional CSS classes for the image element","required":false}},"typeLabel":"GalleryImage"},"typeLabel":"GalleryImage[]","required":false},"imagesSlot":{"type":"object","description":"Custom slot for rendering images (overrides images array)","typeLabel":"React.ReactNode","required":false},"autoPlay":{"type":"boolean","description":"Enable auto-play","required":false},"autoPlayInterval":{"type":"number","description":"Auto-play interval in milliseconds","required":false},"showThumbnails":{"type":"boolean","description":"Show thumbnail navigation","required":false},"className":{"type":"string","description":"Additional CSS classes for the section","required":false},"containerClassName":{"type":"string","description":"Additional CSS classes for the main carousel container","required":false},"slideClassName":{"type":"string","description":"Additional CSS classes for the slide area","required":false},"navigationClassName":{"type":"string","description":"Additional CSS classes for the navigation buttons","required":false},"captionClassName":{"type":"string","description":"Additional CSS classes for the caption","required":false},"thumbnailsClassName":{"type":"string","description":"Additional CSS classes for the thumbnails container","required":false},"thumbnailClassName":{"type":"string","description":"Additional CSS classes for individual thumbnails","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},"slideMediaOverlayIntensity":{"type":"string","description":"Intensity of the gradient overlay on slide images","typeLabel":"\"low\" | \"default\" | \"high\" | \"very-high\"","required":false},"slideMediaBrightness":{"type":"string","description":"Brightness level for slide images (deprecated - prefer slideMediaOverlayIntensity)","typeLabel":"\"10\" | \"20\" | \"25\" | \"30\" | \"40\" | \"50\" | \"75\" | \"100\"","required":false},"sectionId":{"type":"string","description":"Optional Section ID","required":false}},"defaultProps":{},"dependencies":["@opensite/ui"],"tags":["carousel","gallery","thumbnails","images","portfolio","products","real-estate","photography","navigation"],"performance":{},"importantUsageNotes":"Use 5-10 images in the 'images' array — this is a gallery carousel with thumbnail navigation and each image requires a real URL via the 'src' field. DO NOT USE this block if you don't have at least 5 valid real images. Provide meaningful 'alt' text for each image as it doubles as the visible caption. Follow the example props closely for this block."}},"timestamp":"2026-05-13T10:41:02.762Z"}