Generate Before-After Comparison Slider Section

What This Sidekick Query Does

Create a before-and-after image comparison slider section:

Slider Functionality:

  Draggable vertical divider between two images
  “Before” label on left, “After” label on right
  Custom label text: [BEFORE_LABEL] / [AFTER_LABEL]
  Starting divider position: [PERCENTAGE]% from left
  Smooth drag interaction on desktop and touch on mobile
  Optional auto-animate divider on first view


Content Per Comparison:

  Before image upload
  After image upload
  Comparison title
  Short description text
  Product link (optional): [PRODUCT_URL]


Layout Options:

  Single slider (full-width or contained)
  Multiple comparisons in grid: [2/3] per row
  Carousel mode for multiple comparisons
  Image aspect ratio: [square/landscape/portrait/custom]
  Max image width: [MAX_WIDTH]px


Design Settings:

  Divider line color: [DIVIDER_COLOR]
  Divider handle style: [circle/arrows/grab]
  Label style: [overlay-badge/above-image/below-image]
  Background color: [BACKGROUND_COLOR]
  Section heading: [SECTION_HEADING]
  Padding: [TOP_PADDING]px / [BOTTOM_PADDING]px


Requirements:

  Both images must be same dimensions
  Touch-friendly drag handle (minimum 44px tap target)
  Accessible keyboard controls (arrow keys move divider)
  Lazy load images
  No JavaScript dependency for basic display (progressive enhancement)
  Support for [NUMBER] comparison pairs

Expected Output

Tips to Improve Results