Turn your web page into a fullscreen scrolling presentation.

Construct

<div id="container">
	<div data-anchor="page-1"></div>
	<div data-anchor="page-2"></div>
	<div data-anchor="page-3"></div>
	<div data-anchor="page-4"></div>
</div>

Initialize

new Pageable("#container");
		

Customize

new Pageable("#container", {
	animation: 500,
	delay: 400,
	orientation: "horizontal",
	onScroll: function() {
		// do something during scroll
	},
	// many more
});

Control

const pages = new Pageable("#container");

// scroll to previous page
pages.prev();

// scroll to next page
pages.next();

// scroll to defined page
pages.scrollToPage(3);

// scroll to defined anchor
pages.scrollToAnchor("#page-3");

// switch to horizontal scrolling
pages.orientate("horizontal");

Listen

const pages = new Pageable("#container");

pages.on("init", data => {
	// do something when the instance is ready
});

pages.on("scroll.start", data => {
	// do something when scrolling starts
});

pages.on("scroll", data => {
	// do something during scroll
});

pages.on("scroll.end", data => {
	// do something when scrolling ends
});