GridSlider

Features

🚀

Zero Dependencies

Pure vanilla JavaScript — no framework or build step required.

📐

CSS Grid Layout

Track sizing driven entirely by CSS with simple custom properties.

📱

Responsive

Supports both media queries and modern container queries.

♿

Accessible

Keyboard navigation, ARIA labels, and semantic HTML out of the box.

🎨

Easy Theming

Two CSS variables control column count and gap at each breakpoint.

🔄

Multiple Instances

Run as many independent sliders as you need on a single page.

Installation

1. Clone or download

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

2. Add to your page

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

Quick Start

HTML — mark up your slider

<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>
  </div>
  <button data-glider-nav="prev">←</button>
  <button data-glider-nav="next">→</button>
  <div data-glider-pager></div>
</div>

JavaScript — initialise

import initGlider from './index.js';

initGlider();

CSS — customise columns per breakpoint

/* show 4 columns from 768 px, 6 from 1200 px */
:root {
  --gs-visible-cols-md: 4;
  --gs-visible-gaps-md: 3;

  --gs-visible-cols-xl: 6;
  --gs-visible-gaps-xl: 5;
}