Features Breakdown: Video / Image Slider (Coverflow Effect) This section creates a premium, interactive video or image carousel commonly used for "Video Testimonials" or "User Generated Content (UGC)." It features a distinct 3D "Coverflow" animation, where the active slide is centered and highlighted, while side slides are scaled down and faded.

1. Video Handling & Playback

• Flexible Sources: Supports Shopify-hosted MP4s (recommended for speed) as well as YouTube and Vimeo links.

• Smart Play Button: The "Play" icon automatically appears only if a video source is detected. You can customize the button's Color, Outline, and Thickness.

• Playback Modes:

  • Modal (Default): Clicking a card opens the video in a fullscreen cinematic popup.

  • Inline: Option to play the video directly inside the card (replacing the cover image) without opening a popup.

  • Muted Start: Option to force inline videos to start muted.

2. 3D Layout & "Coverflow" Effect

• Depth Control: Define how the carousel behaves visually:

  • Scale: Adjust how much the inactive (side) cards shrink (e.g., to 85% size).

  • Opacity: Adjust how transparent the inactive cards become.

• Overlap (Stacking): The "Gap" setting supports negative values (e.g., -20px), allowing cards to visually overlap each other for a tight, cohesive look.

• Responsive Widths: Set specific pixel widths for cards on Desktop vs. Mobile.

3. Card Styling & Ratios

• Aspect Ratios: Force video cards into specific shapes: Standard 16:9, Classic 4:3, Vertical 9:16 (TikTok/Reels style), or Square 1:1.

• Visual Polish:

  • Corners: Adjustable Radius for rounded edges.

  • Shadows: Toggle a soft drop shadow for depth.

  • Cover Image: Upload a custom "Thumbnail" to display before the video plays (defaults to the video's preview if not set).

4. Typography & Content

• Section Header: dedicated fields for a Pre-title, Main Heading, and Subheading with alignment options.

• Card Text: Each block supports an Author Name and a short Description overlaid at the bottom of the card.

• Granular Control: Independent font size sliders for Desktop and Mobile for every text element.

5. Navigation & Behavior

• Auto-Centering: Logic to ensure the carousel starts perfectly centered if there are more than 2 cards.

• Pagination Dots: Clickable dots at the bottom. Customize their Size, Color, and Gap.

• Mobile Swipe: Optimized for touch devices with smooth momentum scrolling.

6. Visibility & Spacing

• Container: Set a custom Max-Width for the section.

• Padding: Fine-tune margins (Top/Bottom) and side padding (Desktop/Mobile).

• Device Targeting: Options to hide the section on Mobile or Desktop.