Skip to content

MR-1843 Feature : Minimum Swipe Threshold for TP Slider #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

MR-1843 Feature : Minimum Swipe Threshold for TP Slider #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ff8cde1
MR-1843 New attribute: min-swipe-threshold
Vrishabhsk Oct 24, 2025
11b229b
MR-1843 Improve src/slider/README.md
Vrishabhsk Oct 24, 2025
e4782ff
MR-1843 Add example and make conditional better
Vrishabhsk Oct 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/slider/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ slider.setCurrentSlide( 2 );
| per-view | No | <per-view> | Handles slider behavior having more than 1 slides. No. of slides to show in one view. Default value is 1. |
| step | No | <step> | 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> | Responsive settings to be passed in a JSON string format. |

* `responsive` attribute value data shape.
Expand Down
2 changes: 1 addition & 1 deletion src/slider/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
<body>
<main>
<!--Slider that slides horizontally with responsive settings.-->
<tp-slider swipe-threshold="210" flexible-height="yes" infinite="yes" swipe="yes" responsive='[{"media":"(min-width: 600px)","flexible-height":"yes","infinite":"no","swipe":"yes","auto-slide-interval":2000,"per-view":2,"step":2},{"media":"(min-width: 300px)","flexible-height":"yes","infinite":"no","swipe":"yes","behaviour":"fade","auto-slide-interval":2000,"per-view":1,"step":1}]'>
<tp-slider swipe-threshold="210" min-swipe-threshold="35" flexible-height="yes" infinite="yes" swipe="yes" responsive='[{"media":"(min-width: 600px)","flexible-height":"yes","infinite":"no","swipe":"yes","auto-slide-interval":2000,"per-view":2,"step":2},{"media":"(min-width: 300px)","flexible-height":"yes","infinite":"no","swipe":"yes","behaviour":"fade","auto-slide-interval":2000,"per-view":1,"step":1}]'>
<tp-slider-arrow direction="previous"><button>&laquo; Previous</button></tp-slider-arrow>
<tp-slider-arrow direction="next"><button>Next &raquo;</button></tp-slider-arrow>
<tp-slider-track>
Expand Down
19 changes: 8 additions & 11 deletions src/slider/tp-slider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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();
Expand Down Expand Up @@ -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();
}
}

Expand Down