diff --git a/src/slider/README.md b/src/slider/README.md index 076d2e2..d3e7644 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -63,6 +63,7 @@ slider.setCurrentSlide( 2 ); | per-view | No | | Handles slider behavior having more than 1 slides. No. of slides to show in one view. Default value is 1. | | step | No | | Steps number of slides on next and previous transition. No. of slides to step to at a time. Default value is 1. | | swipe-threshold | No | `200` | It will not swipe if the swipe value is more than this number. Default value is 200. | +| min-swipe-threshold | No | `0` | The minimum swipe distance required for a swipe to register. Works with swipe-threshold to define the valid swipe range. Default value is 0. | | responsive | No | | Responsive settings to be passed in a JSON string format. | * `responsive` attribute value data shape. diff --git a/src/slider/index.html b/src/slider/index.html index c53dc8a..5b6f3ee 100644 --- a/src/slider/index.html +++ b/src/slider/index.html @@ -33,7 +33,7 @@
- + diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts index 819ea94..b1f9fcb 100644 --- a/src/slider/tp-slider.ts +++ b/src/slider/tp-slider.ts @@ -18,6 +18,7 @@ export class TPSliderElement extends HTMLElement { protected touchStartX: number = 0; protected touchStartY: number = 0; protected swipeThreshold: number = 200; + protected minSwipeThreshold: number = 0; protected responsiveSettings: { [ key: string ]: any }; protected allowedResponsiveKeys: string[] = [ 'flexible-height', @@ -44,6 +45,7 @@ export class TPSliderElement extends HTMLElement { // Threshold Setting. this.swipeThreshold = Number( this?.getAttribute( 'swipe-threshold' ) ?? '200' ); + this.minSwipeThreshold = Number( this?.getAttribute( 'min-swipe-threshold' ) ?? '0' ); // Initialize slider. this.slide(); @@ -674,17 +676,12 @@ export class TPSliderElement extends HTMLElement { return; } - // Check if it's a right or left swipe. - if ( swipeDistanceX > 0 ) { - // Right-Swipe: Check if horizontal swipe distance is less than the threshold. - if ( swipeDistanceX < this.swipeThreshold ) { - this.previous(); - } - } else if ( swipeDistanceX < 0 ) { - // Left-Swipe: Check if horizontal swipe distance is less than the threshold. - if ( swipeDistanceX > -this.swipeThreshold ) { - this.next(); - } + // Right-Swipe: Check if horizontal swipe distance is within the threshold range. + if ( swipeDistanceX < this.swipeThreshold && swipeDistanceX > this.minSwipeThreshold ) { + this.previous(); + } else if ( swipeDistanceX > -this.swipeThreshold && swipeDistanceX < -this.minSwipeThreshold ) { + // Left-Swipe: Check if horizontal swipe distance is within the threshold range. + this.next(); } }