Media Components

media components purpose display collections of media content in engaging formats key features image carousel functionality navigation controls auto play capability touch/swipe support responsive design text overlay support media components overview total available 1 component carousel/slider (1 variant) 1\ carousel purpose display image collections with navigation and auto play structure visual layout full width image container gradient overlay (purple to transparent) text overlay area navigation indicators navigation controls touch enabled interface features navigation controls ✓ previous button (left arrow) ✓ next button (right arrow) ✓ indicator dots ✓ auto play capability ✓ manual navigation content display ✓ large image area ✓ text overlay support ("i am click here" example) ✓ description text support ✓ gradient background overlay ✓ caption positioning interaction ✓ click navigation buttons ✓ touch/swipe support ✓ keyboard navigation (arrows) ✓ click indicators to jump to image ✓ auto advance on timer components used image container navigation buttons (previous/next) indicator dots text overlay gradient overlay control buttons touch event handlers customization options content customization change carousel images update overlay text modify caption text change gradient colors adjust overlay opacity visual customization modify navigation button style change indicator dot style adjust spacing update fonts customize gradients change button positions functional customization adjust auto play timing enable/disable auto play configure transition speed set navigation behavior customize swipe sensitivity carousel component details navigation controls previous button navigate to previous image next button navigate to next image indicator dots show current position, clickable to jump to image auto play automatic advancement through images touch support swipe left/right to navigate visual elements image container full width, responsive sizing gradient overlay purple gradient from solid to transparent text overlay positioned at bottom left text content "i am click here" (example) description text secondary text support interaction methods click previous/next buttons click indicator dots swipe left/right (touch devices) keyboard arrow keys auto advance timer use cases for carousel product image showcase portfolio galleries team member profiles customer testimonials with images event photo galleries feature highlights banner rotations hero section images image collections before/after comparisons responsive design ✓ mobile optimized ✓ touch gestures supported ✓ swipe navigation ✓ responsive image sizing ✓ flexible layout ✓ adapts to screen size accessibility features ✓ keyboard navigation (arrow keys) ✓ indicator dots for position awareness ✓ text alternatives ✓ alt text support for images ✓ touch friendly buttons ✓ clear navigation controls performance features ✓ image lazy loading capable ✓ smooth transitions ✓ efficient rendering ✓ touch event optimization ✓ minimal resource usage customization examples color customization change gradient overlay color modify overlay opacity update button colors customize indicator colors timing customization set auto play interval (e g , 3 seconds) configure transition duration adjust swipe sensitivity layout customization position text overlay adjust button placement modify indicator position change spacing