@dreamworld/dw-swipe NPM

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

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) {}

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>

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