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.
npm install @dreamworld/dw-swipe- 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;
}| 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? |
| 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 |