GridSlider Demo

1. Basic Slider (Media Queries)

A responsive slider using media queries. Automatically adjusts columns based on viewport width.

1
2
3
4
5
6
7
8
9
💡 Uses: data-glider, data-glider-grid, data-glider-item, data-glider-pager

2. Slider with Navigation

Enhanced with previous/next buttons. Buttons automatically disable at boundaries.

1
2
3
4
5
6
7
8
💡 Navigation: data-glider-nav="start|prev|next|end"

3. Container Query Slider

Uses modern container queries - responsive to container size, not viewport. Perfect for reusable components!

1
2
3
4
5
6
7
8
9
10
11
12
💡 Add class: glider-cq for container query support

4. Few Items (Auto-hide Pager)

When there's only one page, the pager automatically hides. Smart defaults!

1
2
3
4
💡 Pager auto-hides when only one page exists