Scroll Gallery

Example

<div class="scroll-gallery">
  <div class="track">
    <div class="item">Slide 1</div>
    <div class="item">Slide 2</div>
    <div class="item">Slide 3</div>
  </div>
</div>

Patterns

Full-Width Slides

Default behavior - each item fills 100% of the container width:

<div class="scroll-gallery">
  <div class="track">
    <div class="item">Full Width 1</div>
    <div class="item">Full Width 2</div>
    <div class="item">Full Width 3</div>
    <div class="item">Full Width 4</div>
  </div>
</div>

Variable Width Cards

Use item.variable for items with their own width:

<div class="scroll-gallery">
  <div class="track">
    <div class="item variable">
      <div class="card">Card 1</div>
    </div>
    <div class="item variable">
      <div class="card">Card 2</div>
    </div>
    <div class="item variable">
      <div class="card">Card 3</div>
    </div>
  </div>
</div>

Center-Aligned Items

Use item.center to snap items to the center:

<div class="scroll-gallery">
  <div class="track">
    <div class="item variable center">
      <img src="image1.jpg" alt="Image 1">
    </div>
    <div class="item variable center">
      <img src="image2.jpg" alt="Image 2">
    </div>
    <div class="item variable center">
      <img src="image3.jpg" alt="Image 3">
    </div>
  </div>
</div>

Hidden Scrollbar

Use scroll-gallery.no-scrollbar to hide the scrollbar while keeping scroll functionality:

<div class="scroll-gallery no-scrollbar">
  <div class="track">
    <div class="item variable">Card 1</div>
    <div class="item variable">Card 2</div>
    <div class="item variable">Card 3</div>
  </div>
</div>

Vertical Gallery

Use scroll-gallery.vertical for vertical scrolling:

<div class="scroll-gallery vertical" style="height: 400px;">
  <div class="track">
    <div class="item">Vertical 1</div>
    <div class="item">Vertical 2</div>
    <div class="item">Vertical 3</div>
    <div class="item">Vertical 4</div>
  </div>
</div>

API Reference

Container Classes

Child Classes

HTML Structure

<div class="scroll-gallery [no-scrollbar] [vertical]">
  <div class="track">
    <div class="item [variable] [center]">
      <!-- Your content -->
    </div>
    <!-- More items... -->
  </div>
</div>

Accessibility

• Native scroll behavior ensures full keyboard navigation support
• Works with arrow keys, Page Up/Down, Home/End
• Respects prefers-reduced-motion - disables smooth scroll for users who prefer reduced motion
• Touch-friendly with iOS momentum scrolling support
• Screen readers can navigate through all items sequentially
• No JavaScript required - works in all browsers with CSS support
• Consider adding aria-label to the container for context (e.g., "Product gallery")
• Ensure focusable elements within items are keyboard accessible

Recommended ARIA

<div class="scroll-gallery" aria-label="Product gallery">
  <div class="track">
    <div class="item" role="group" aria-label="Product 1">
      <!-- Content -->
    </div>
    <!-- More items... -->
  </div>
</div>

Best Practices

• Set explicit heights/widths: For vertical galleries, set a height on the container. For variable-width items, ensure content has defined dimensions.
• Don't overuse snap points: Mandatory snap points work best for distinct sections. For long scrollable content, consider using scroll-snap-type: x proximity instead.
• Test on touch devices: Scroll galleries work differently on touch vs. mouse. Always test on mobile.
• Provide visual indicators: Consider adding pagination dots or scroll indicators so users know there's more content.
• Lazy load images: For image galleries, use loading="lazy" on images to improve performance.
• Consider spacing: Add appropriate gaps between items (margin/padding) for better visual separation.

Related