GridSlider is a lightweight, modern JavaScript library for creating responsive, touch-friendly, and accessible slider/carousel components using CSS Grid. Built with modern web standards and best practices.

• 🎯 Modern Architecture - Uses data attributes for behavior, classes for styling
• 🚀 Zero Dependencies - Pure JavaScript, no framework required
• 📐 CSS Grid Layout - Leverages native CSS Grid for flexibility
• 📱 Responsive - Supports both media queries and container queries
• ♿ Accessible - Keyboard navigation, ARIA labels, semantic HTML
• 🎨 Easy Theming - CSS variables and SCSS for customization
• 🔄 Multiple Instances - Run multiple sliders on one page
• 📦 Lightweight - Small bundle size, tree-shakeable

GridSlider follows modern best practices by using data attributes for JavaScript hooks and CSS classes for styling. This separation of concerns provides:

• Maintainability - Rename CSS classes without breaking JavaScript
• Clarity - Clear distinction between behavior and presentation
• Flexibility - Style changes don't affect functionality
• Best Practice - Follows 2026 web development standards

<!-- ✅ Data attributes = Behavior & State -->
<div data-glider>
  <div data-glider-grid>
    <div data-glider-item>Content</div>
  </div>
  <button data-glider-nav="prev">Previous</button>
  <button data-glider-nav="next">Next</button>
  <div data-glider-pager></div>
</div>

<!-- ✅ CSS classes = Styling & Variants -->
<div data-glider class="glider-mq">
  <!-- Styling class for media query variant -->
</div>

Clone or download this repository:

git clone https://github.com/foxshack/gridslider.git

Include the files in your project:

<link rel="stylesheet" href="path/to/theme.css">
<script type="module" src="path/to/index.js"></script>

<div data-glider class="glider-mq">
  <div data-glider-grid>
    <div data-glider-item>Item 1</div>
    <div data-glider-item>Item 2</div>
    <div data-glider-item>Item 3</div>
    <!-- Add more items -->
  </div>
  <div data-glider-pager></div>
</div>

import initGlider from './index.js';

// Initialize all sliders with default selector [data-glider]
initGlider();

// Or specify a custom selector
initGlider({ sliderSelector: '[data-glider]' });

<div data-glider class="glider-mq">
  <div data-glider-grid>
    <div data-glider-item>1</div>
    <div data-glider-item>2</div>
    <div data-glider-item>3</div>
  </div>
  <div data-glider-pager></div>
</div>

<div data-glider class="glider-mq">
  <div data-glider-grid>
    <!-- items -->
  </div>

  <button data-glider-nav="start">⏮ First</button>
  <button data-glider-nav="prev">← Previous</button>
  <button data-glider-nav="next">Next →</button>
  <button data-glider-nav="end">Last ⏭</button>

  <div data-glider-pager></div>
</div>

Navigation buttons automatically disable at boundaries.

For component-based responsive behavior:

<div data-glider class="glider-cq">
  <div data-glider-grid>
    <!-- items -->
  </div>
  <div data-glider-pager></div>
</div>

Customize appearance via CSS variables:

:root {
  --glider-spacing: 1rem;        /* Gap between items */
  --glider-peek: 0;              /* Peek amount for next item */
  --glider-grid-columns: 2;      /* Base columns */
}

Media Query Responsive:

<div data-glider class="glider-mq">...</div>

Container Query Responsive:

<div data-glider class="glider-cq">...</div>

Style items using standard CSS:

[data-glider-item] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 1rem;
  /* Your custom styles */
}

initGlider(options)

Options:

• sliderSelector (string) - CSS selector for glider containers
  • Default: '[data-glider]'

Each glider instance exposes these methods:

const glider = makeGlider(element);

glider.getNumberOfItems()              // Returns total item count
glider.getNumberOfItemsFullyVisible()  // Returns visible item count
glider.getNumberOfPages()              // Returns total page count
glider.getCurrentPage()                // Returns current page (0-indexed)
glider.updatePager()                   // Re-renders pagination
glider.updateActivePage()              // Updates active page indicator
glider.scrollToStart()                 // Scroll to first item
glider.scrollToEnd()                   // Scroll to last item
glider.scrollToNextPage()              // Scroll to next page
glider.scrollToPreviousPage()          // Scroll to previous page

Data Attributes (for behaviour):

<div data-glider>                    <!-- JS hook -->
  <div data-glider-grid>             <!-- JS hook -->
    <div data-glider-item>1</div>    <!-- JS hook -->
  </div>
  <button data-glider-nav="next">   <!-- JS hook + config -->
  <div data-state="active">          <!-- State management -->
</div>

CSS Classes (for styling):

<div data-glider class="glider-mq">        <!-- Styling variant -->
<div data-glider class="glider-cq">        <!-- Different variant -->
<div data-glider class="my-custom-theme">  <!-- Custom styling -->

This pattern ensures:

• JavaScript functions remain stable when redesigning
• Styling classes can be renamed freely
• Clear separation of concerns
• Better team collaboration

• Chrome/Edge 88+ (container queries in .glider-cq variant)
• Firefox 110+ (container queries)
• Safari 16+ (container queries)
• All modern browsers (media query variant works universally)

Container query support is progressive - falls back gracefully to base styles.

Build CSS from SCSS:

npm run build

Watch for changes:

npm run watch

Check out the live demo to see all features in action, including:

• Basic responsive slider
• Navigation buttons
• Container queries
• Auto-hiding pager
• Multiple instances

MIT © Fox Shack

Contributions are welcome! Feel free to:

• Report bugs
• Suggest features
• Submit pull requests

• ✨ Refactored to use modern data attribute pattern
• 🎯 Separated behavior (data attributes) from styling (CSS classes)
• 📚 Improved documentation and demo
• ♿ Enhanced accessibility
• 🔧 Added comprehensive API methods