Skip to content

A LitElement mixin to implement Swipe behavior. e.g. It's used in Kerika board to scroll column one at a time through swipe gesture.

Notifications You must be signed in to change notification settings

DreamworldSolutions/dw-swipe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

dw-swipe

A LitElement mixin to implement Swipe behavior. e.g. It's used in Kerika board to scroll column one at a time through swipe gesture.

Installation

npm install @dreamworld/dw-swipe

Usage

  1. Apply Mixin to your view-element Class.
//Import dw -swiper mixin
@import {DwSwipe} from '@dreamworld/dw-swipe';
	
//Import lit-element class
@import {LitElement} . from 'lit-element';
	
//Extend dw-swipe class to lit-element class
class swiperList extends DwSwipe(LitElement) {}
  1. Set required layout in your view-element template. e.g.
<!-- Slider main container -->  
<div class="dw-swipe-container">  
	<!-- Additional required slider wrapper -->  
	<div class="dw-swipe-slider-frame">  
		<!-- Slides -->  
		<div>Slide 1</div>  
		<div>Slide 2</div>  
		<div >Slide 3</div> ... 
  </div>
</div>
  1. Set fix width/height to the .dw-swipe-container.
.dw-swipe-container {  
	width: 600px;  
	height: 300px;  
}

Slider Methods & Properties

Properties

Name Type Default Description
swipeDisabled Boolean false Swipe is disabled or not
swipeDirection String horizontal Could be 'horizontal' or 'vertical' (for vertical slider).
swipeMinDisplacement Number 25 Number of pixels. If total movement (mouse or touch) is less than this number, than it won't be considered a swipe event and at the end scroll will be restored to the start position.
swipeRestraint Number 25 Number of pixels. Actual move/scroll operation will be started only when user moves (mouse or touch) by these many pixels.
swipeMultiplier Number 1 How many slides are a move to next/previous?

Methods

Name Description
_swipeRestore() Restore swipe to current slide
_swipeNext() Swipe to next slide
_swipePrev() Swipe to previous slide
_swipeScrollToPosition(pos) Swipe to specific position. pos: Passed to swipe position
_swipeScrollToIndex(index, disableTransition) Swipe to specific Slide (identified by the 0-based index.).
_swipeDestroy() Destroy a swipe

About

A LitElement mixin to implement Swipe behavior. e.g. It's used in Kerika board to scroll column one at a time through swipe gesture.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •