Slidepage is a simple complement in pure javascript that allows you to create sliding views in a container, provides functions to control this, returning promises.
<div class="app">
<div class="sp_page">Page 1</div>
<div class="sp_page">Page 2</div>
<div class="sp_page">Page 3</div>
</div>
<button onclick="sp.prev()">PREV</button>
<button onclick="sp.next()">NEXT</button>
var sp = new SLIDEPAGE({
el: ".app",
repeat: true, // default: false
realNumber: true, // default: false
direction: "x", // default: x
display: "block", // default: block
transition: 300, // default: 250
forceDirection: true // default: true
});
https://codepen.io/bonarja/pen/ywmjLX
el
: containt, allows name or DOM elementrepeat
: repetitive or circular sliderealNumber
: start indexing from 1direction
: slide direction, x from horizontal, y from verticaldisplay
: select the method to show each page (block, flex, etc)transition
: duration of the animation in msforceDirection
: continue the same direction of the slide when you reach the end when reapeat is true
all methods are promises, these are fulfilled when the animation is complete, except the show function.
go
: take the slider to a page, recive the number of thisnext
: go to the next pageprev
: go to the previous pageshow
: take the slider to a page, recive the number of this (without animation, no promise)
the promises function (go, next, prev) returns object with {current, previous}
pages, the function show (no promise) return an object {current, previous}
pages
var sp = new SLIDEPAGE({
el: ".app"
});
sp.go(1).then(data => {
console.log("the animation has been completed");
console.log("the current page:", data.current);
console.log("the previous page:", data.previous);
});