Skip to content

Commit 8d01e32

Browse files
ismail9kismail9k
authored
Merge pull request #468 from aovcina/feat/limit_excessive_dragging
feat: add preventExcessiveDragging option to limit boundary slide gestures
2 parents 42358c9 + b49e08f commit 8d01e32

File tree

5 files changed

+50
-21
lines changed

5 files changed

+50
-21
lines changed

‎docs/config.md

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,28 @@
22

33
## Available Props
44

5-
| Prop | Default | Description |
6-
| ---------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
7-
| `enabled` | true | Controlled weather the carousel is enabled or disabled. <Badge text="0.8.0"/> |
8-
| `itemsToShow` | 1 | Count of items to showed per view (can be a fraction). Must be between 1 and the total number of slides. If set to a value less than 1, it defaults to 1. If set to a value greater than the total number of slides, it defaults to the total number of slides. |
9-
| `itemsToScroll` | 1 | Number of slides to be scrolled |
10-
| `wrapAround` | false | Enable infinite scrolling mode. |
11-
| `snapAlign` | 'center' | Controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]' |
12-
| `transition` | 300 | Sliding transition time in ms. |
13-
| `autoplay` | 0 | Auto play time in ms. |
14-
| `breakpointMode` | 'viewport' | Determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' <Badge text="0.5.0"/> |
15-
| `breakpoints` | null | An object to pass all the breakpoints settings. |
16-
| `modelValue` | 0 | Index number of the initial slide. |
17-
| `mouseDrag` | true | Toggle mouse dragging |
18-
| `touchDrag` | true | Toggle pointer touch dragging |
19-
| `pauseAutoplayOnHover` | false | Toggle if auto play should pause on mouse hover |
20-
| `dir` | 'ltr' | Controls the carousel direction. Available values: 'ltr', 'rtl', 'ttb', 'btt' or use verbose 'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top' <Badge text="0.7.0"/> |
21-
| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. <Badge text="0.3.1"/> |
22-
| `gap` | 0 | Used to add gap between the slides. <Badge text="0.6.0"/> |
23-
| `height` | 'auto' | Carousel track height. <Badge text="0.7.0"/> |
24-
| `ignoreAnimations` | false | List of animation names to ignore for size calculations. Can be a boolean, string, or array of strings. <Badge text="0.10.0"/> |
5+
| Prop | Default | Description |
6+
| -------------------------- | -------------------------------- |-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
7+
| `enabled` | true | Controlled weather the carousel is enabled or disabled. <Badge text="0.8.0"/> |
8+
| `itemsToShow` | 1 | Count of items to showed per view (can be a fraction). Must be between 1 and the total number of slides. If set to a value less than 1, it defaults to 1. If set to a value greater than the total number of slides, it defaults to the total number of slides. |
9+
| `itemsToScroll` | 1 | Number of slides to be scrolled |
10+
| `wrapAround` | false | Enable infinite scrolling mode. |
11+
| `snapAlign` | 'center' | Controls the carousel position alignment, can be 'start', 'end', 'center-[odd\|even]' |
12+
| `transition` | 300 | Sliding transition time in ms. |
13+
| `autoplay` | 0 | Auto play time in ms. |
14+
| `breakpointMode` | 'viewport' | Determines how the carousel breakpoints are calculated. acceptable values: 'viewport', 'carousel' <Badge text="0.5.0"/> |
15+
| `breakpoints` | null | An object to pass all the breakpoints settings. |
16+
| `modelValue` | 0 | Index number of the initial slide. |
17+
| `mouseDrag` | true | Toggle mouse dragging |
18+
| `touchDrag` | true | Toggle pointer touch dragging |
19+
| `pauseAutoplayOnHover` | false | Toggle if auto play should pause on mouse hover |
20+
| `dir` | 'ltr' | Controls the carousel direction. Available values: 'ltr', 'rtl', 'ttb', 'btt' or use verbose 'left-to-right', 'right-to-left', 'top-to-bottom', 'bottom-to-top' <Badge text="0.7.0"/> |
21+
| `i18n` | [`{ ariaNextSlide: ...}`](#i18n) | Used to translate and/or change aria labels and additional texts used in the carousel. <Badge text="0.3.1"/> |
22+
| `gap` | 0 | Used to add gap between the slides. <Badge text="0.6.0"/> |
23+
| `height` | 'auto' | Carousel track height. <Badge text="0.7.0"/> |
24+
| `ignoreAnimations` | false | List of animation names to ignore for size calculations. Can be a boolean, string, or array of strings. <Badge text="0.10.0"/> |
25+
| `preventExcessiveDragging` | false | Prevents unwanted dragging behavior when the carousel reaches its first or last slide. <Badge text="0.13.0" /> |
26+
2527

2628

2729
## Slots

‎src/components/Carousel/Carousel.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -689,7 +689,19 @@ export const Carousel = defineComponent({
689689
// Include user drag interaction offset
690690
const dragOffset = isVertical.value ? dragged.y : dragged.x
691691

692-
const totalOffset = scrolledOffset + dragOffset
692+
let totalOffset = scrolledOffset + dragOffset
693+
694+
if (!config.wrapAround && config.preventExcessiveDragging) {
695+
const maxSlidingValue =
696+
(slidesCount.value - config.itemsToShow) * effectiveSlideSize.value
697+
const min = isReversed.value ? 0 : -1 * maxSlidingValue
698+
const max = isReversed.value ? maxSlidingValue : 0
699+
totalOffset = getNumberInRange({
700+
val: totalOffset,
701+
min,
702+
max,
703+
})
704+
}
693705

694706
return `translate${translateAxis}(${totalOffset}px)`
695707
})

‎src/components/Carousel/carouselProps.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,4 +121,17 @@ export const carouselProps = {
121121
return SLIDE_EFFECTS.includes(value)
122122
},
123123
},
124+
preventExcessiveDragging: {
125+
default: false,
126+
type: Boolean,
127+
validator(value: boolean, props: { wrapAround?: boolean }) {
128+
if (value && props.wrapAround)
129+
console.warn( /* eslint-disable-line no-console */
130+
'[vue3-carousel warn]: preventExcessiveDragging cannot be used with wrapAround. ' +
131+
'The preventExcessiveDragging setting will be ignored.'
132+
);
133+
134+
return true;
135+
}
136+
}
124137
}

‎src/shared/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,5 @@ export const DEFAULT_CONFIG: CarouselConfig = {
6161
i18n: I18N_DEFAULT_CONFIG,
6262
ignoreAnimations: false,
6363
slideEffect: SLIDE_EFFECTS[0],
64+
preventExcessiveDragging: false
6465
}

‎src/shared/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export interface CarouselConfig {
4747
i18n: { [key in I18nKeys]?: string }
4848
ignoreAnimations: boolean | string[] | string
4949
slideEffect: SlideEffect
50+
preventExcessiveDragging: boolean
5051
}
5152

5253
export type VueClass = string | Record<string, boolean> | VueClass[]

0 commit comments

Comments
 (0)