fullpage-swiper
v0.2.9
Published
Fullpage-swiper is fullpage movement library for browser via touch actions
Downloads
4
Maintainers
Readme
Fullpage-swiper library
fullpage-swiper
is fullpage movement library for browser via touch actions
Demo site (Currently, support mobile drag event only)
https://fullpage-swiper.netlify.app/
Install
npm install -S fullpage-swiper
Check examples
git clone https://github.com/catalsrun/fullpage-swiper.git
npm install
cd fullpage-swiper/examples
npm install
npm start
# Go to http://localhost:3000
# Check two files
# - examples/pages/top-left.js
# - examples/pages/y-x.js
Getting started
import FullpageSwiper from 'fullpage-swiper';
new FullpageSwiper('#container', {
debug: true, // debug mode - default false, remove for production
threshold: 10, // touch detection minimum value
dragStart() {
console.log('DRAG_START: callback');
},
dragMove(context) {
const { snapshotPositions, stackMoveFromTo } = context
// console.log('DRAG_MOVE: callback', snapshotPositions, stackMoveFromTo);
},
dragEnd(context) {
console.log('DRAG_END: callback', context.currentIdx);
}
});
CDN
<script src="https://unpkg.com/fullpage-swiper"><script>
<script>
// Use 'FullpageSwiper' global variable.
<script>
Constraints
- Only one top-level data-stack-type
- One-depth sub-level mark-up structure - [data-stack > data-stack-type] set
data-* naming explanation
- data-stack-type : 'top' | 'left' | 'y' | 'x'
- data-stack : direct child of data-stack-type element
stack-type explanation
- top : position absolute based movement via top value (data-stack element)
- left : position absolute based movement via top value (data-stack element)
- y : transform based movement via transformY value (data-stack-type element)
- x : transform based movement via transformX value (data-stack-type element)
Current features
- drag event
Todo features
- touch swipe event
- mousewheel event
- keydown event