From ff8cde12efab4319ad15e7d564709eac0da7acb8 Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Fri, 24 Oct 2025 14:07:52 +0400 Subject: [PATCH 1/3] MR-1843 New attribute: min-swipe-threshold --- src/slider/README.md | 1 + src/slider/tp-slider.ts | 21 ++++++++++----------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/src/slider/README.md b/src/slider/README.md index 076d2e2..4d3cfcf 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 threshold required for swipe to register. | | responsive | No | | Responsive settings to be passed in a JSON string format. | * `responsive` attribute value data shape. diff --git a/src/slider/tp-slider.ts b/src/slider/tp-slider.ts index 819ea94..dd48403 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,14 @@ 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(); + } + + // Left-Swipe: Check if horizontal swipe distance is within the threshold range. + if ( swipeDistanceX > -this.swipeThreshold && swipeDistanceX < -this.minSwipeThreshold ) { + this.next(); } } From 11b229b9e3de91e08f1f1a7d89f56ccc029f46c6 Mon Sep 17 00:00:00 2001 From: Vrishabh Jasani <71686151+Vrishabhsk@users.noreply.github.com> Date: Fri, 24 Oct 2025 14:17:28 +0400 Subject: [PATCH 2/3] MR-1843 Improve src/slider/README.md Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/slider/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/slider/README.md b/src/slider/README.md index 4d3cfcf..d3e7644 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -63,7 +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 threshold required for swipe to register. | +| 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. From e4782ff8763d1e31daaa55cafa15c4110724923f Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Fri, 24 Oct 2025 14:22:26 +0400 Subject: [PATCH 3/3] MR-1843 Add example and make conditional better --- src/slider/index.html | 2 +- src/slider/tp-slider.ts | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) 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 dd48403..b1f9fcb 100644 --- a/src/slider/tp-slider.ts +++ b/src/slider/tp-slider.ts @@ -679,10 +679,8 @@ export class TPSliderElement extends HTMLElement { // Right-Swipe: Check if horizontal swipe distance is within the threshold range. if ( swipeDistanceX < this.swipeThreshold && swipeDistanceX > this.minSwipeThreshold ) { this.previous(); - } - - // Left-Swipe: Check if horizontal swipe distance is within the threshold range. - if ( swipeDistanceX > -this.swipeThreshold && swipeDistanceX < -this.minSwipeThreshold ) { + } else if ( swipeDistanceX > -this.swipeThreshold && swipeDistanceX < -this.minSwipeThreshold ) { + // Left-Swipe: Check if horizontal swipe distance is within the threshold range. this.next(); } }