Layout

The script measures what the page lays out, so responsive settings are media queries:

.gs { --gs-per-view: 1.2; --gs-gap: 12px; }

@media (min-width: 960px) {
	.gs { --gs-per-view: 3; }
}

Give the slides a height, an aspect-ratio, or use autoHeight().

Downwards

createSlider( element, { axis: 'y' } );

.gs { height: 70vh; --gs-per-view: 1.5; }

The slides follow each other downwards: drag up and down, arrow up and down, the wheel as it is. At its ends the wheel scrolls the page. The slider needs a height. Effects are written for a row and are turned with the slider.

Rows

Nothing of the script: a grid that flows in columns. A column is a snap.

.gs-track {
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat( 2, 1fr );
	grid-auto-columns: calc( ( 100% - 2 * var(--gs-gap) ) / 3 );
	gap: var(--gs-gap);
}

Focus point

.gs { --gs-focus: 30% 70%; }

What object-position is for an image: the point that stays in view when the image is cut. The canvas takes it from the page.