diff --git a/docs/config.md b/docs/config.md
index 60c63cad..24410855 100644
--- a/docs/config.md
+++ b/docs/config.md
@@ -8,30 +8,31 @@ Vue 3 Carousel offers a comprehensive set of configuration options to customize
## All Available Props
-| Prop | Type | Default | Description |
-|----------------------------|---------------------------------------------|----------------------------------|--------------------------------------------------------------------------------------------------------|
-| `autoplay` | `number` | 0 | Time interval (in milliseconds) between auto-advancing slides. Set to 0 to disable autoplay. |
-| `breakpointMode` | 'viewport', 'carousel' | 'viewport' | Defines whether breakpoints are calculated based on viewport width or carousel container width. |
-| `breakpoints` | `object` | null | Responsive breakpoint configurations. Each breakpoint can override any carousel prop. |
-| `clamp` | `boolean` | false | If true will clamp itemsToShow to the number of available slides |
-| `dir` | 'ltr', 'rtl', 'ttb', 'btt' | 'ltr' | Carousel sliding direction. Supports horizontal (ltr/rtl) and vertical (ttb/btt) orientations. |
-| `enabled` | `boolean` | true | Controls whether the carousel is interactive. When false, all interactions are disabled. |
-| `gap` | `number` | 0 | Space (in pixels) between carousel slides. |
-| `height` | `number` \| `string` | 'auto' | Sets the carousel track height. Required for vertical orientation. |
-| `i18n` | `object` | `{ ... }` | Internationalization options for accessibility labels and text content. See [i18n](#i18n) for configuration details. |
-| `ignoreAnimations` | `boolean` \| `string` \| `array` | false | Specifies which CSS animations should be excluded from slide size calculations. |
-| `itemsToScroll` | `number` | 1 | Number of slides to move when navigating. Useful for creating slide groups. |
-| `itemsToShow` | `number` \| 'auto' | 1 | Number of slides visible simultaneously. Use 'auto' for variable width slides. |
-| `modelValue` | `number` | 0 | Controls the active slide index. Can be used with v-model for two-way binding. |
-| `mouseDrag` | `boolean` \| `object` | true | Enables/disables mouse drag navigation. See [Drag Options](#drag-options) for configuration details. |
-| `mouseWheel` | `boolean` \| `object` | false | Enables/disables mouse wheel scrolling for carousel navigation. See [Wheel Options](#wheel-options) for configuration details. |
-| `pauseAutoplayOnHover` | `boolean` | false | When true, autoplay pauses while the mouse cursor is over the carousel. |
-| `preventExcessiveDragging` | `boolean` | false | Limits dragging behavior at carousel boundaries for better UX. |
-| `slideEffect` | 'slide', 'fade' | 'slide' | Determines the transition effect between slides. |
-| `snapAlign` | 'start', 'end', 'center-odd', 'center-even' | 'center' | Determines how slides are aligned within the viewport. |
-| `touchDrag` | `boolean` \| `DragConfig` | true | Enables/disables touch navigation on touch-enabled devices. See [Drag Options](#drag-options) for configuration details. |
-| `transition` | `number` | 300 | Duration of the slide transition animation in milliseconds. |
-| `wrapAround` | `boolean` | false | When true, creates an infinite loop effect by connecting the last slide to the first. |
+| Prop | Type | Default | Description |
+|----------------------------|---------------------------------------------|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------|
+| `autoplay` | `number` | 0 | Time interval (in milliseconds) between auto-advancing slides. Set to 0 to disable autoplay. |
+| `breakpointMode` | 'viewport', 'carousel' | 'viewport' | Defines whether breakpoints are calculated based on viewport width or carousel container width. |
+| `breakpoints` | `object` | null | Responsive breakpoint configurations. Each breakpoint can override any carousel prop. |
+| `clamp` | `boolean` | false | If true will clamp itemsToShow to the number of available slides |
+| `dir` | 'ltr', 'rtl', 'ttb', 'btt' | 'ltr' | Carousel sliding direction. Supports horizontal (ltr/rtl) and vertical (ttb/btt) orientations. |
+| `enabled` | `boolean` | true | Controls whether the carousel is interactive. When false, all interactions are disabled. |
+| `focusInJumpToSlide` | `boolean` | true | Focusing a slide will jump-navigate to it |
+| `gap` | `number` | 0 | Space (in pixels) between carousel slides. |
+| `height` | `number` \| `string` | 'auto' | Sets the carousel track height. Required for vertical orientation. |
+| `i18n` | `object` | `{ ... }` | Internationalization options for accessibility labels and text content. See [i18n](#i18n) for configuration details. |
+| `ignoreAnimations` | `boolean` \| `string` \| `array` | false | Specifies which CSS animations should be excluded from slide size calculations. |
+| `itemsToScroll` | `number` | 1 | Number of slides to move when navigating. Useful for creating slide groups. |
+| `itemsToShow` | `number` \| 'auto' | 1 | Number of slides visible simultaneously. Use 'auto' for variable width slides. |
+| `modelValue` | `number` | 0 | Controls the active slide index. Can be used with v-model for two-way binding. |
+| `mouseDrag` | `boolean` \| `object` | true | Enables/disables mouse drag navigation. See [Drag Options](#drag-options) for configuration details. |
+| `mouseWheel` | `boolean` \| `object` | false | Enables/disables mouse wheel scrolling for carousel navigation. See [Wheel Options](#wheel-options) for configuration details. |
+| `pauseAutoplayOnHover` | `boolean` | false | When true, autoplay pauses while the mouse cursor is over the carousel. |
+| `preventExcessiveDragging` | `boolean` | false | Limits dragging behavior at carousel boundaries for better UX. |
+| `slideEffect` | 'slide', 'fade' | 'slide' | Determines the transition effect between slides. |
+| `snapAlign` | 'start', 'end', 'center-odd', 'center-even' | 'center' | Determines how slides are aligned within the viewport. |
+| `touchDrag` | `boolean` \| `DragConfig` | true | Enables/disables touch navigation on touch-enabled devices. See [Drag Options](#drag-options) for configuration details. |
+| `transition` | `number` | 300 | Duration of the slide transition animation in milliseconds. |
+| `wrapAround` | `boolean` | false | When true, creates an infinite loop effect by connecting the last slide to the first. |
## Basic Configuration
diff --git a/package.json b/package.json
index 347de7d2..0b8e65c8 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,7 @@
"typecheck:watch": "tsc -p . --watch --preserveWatchOutput",
"test": "vitest run --coverage",
"test:update": "vitest run --u",
- "test:watch": "vitest watch",
- "prepare": "husky"
+ "test:watch": "vitest watch"
},
"repository": {
"type": "git",
diff --git a/playground/App.vue b/playground/App.vue
index 7243f729..095da998 100644
--- a/playground/App.vue
+++ b/playground/App.vue
@@ -48,6 +48,7 @@ const defaultConfig = {
pauseAutoplayOnHover: true,
useBreakpoints: false,
threshold: 0.5,
+ focusInJumpToSlide: true
}
const config = reactive({ ...defaultConfig })
@@ -118,6 +119,11 @@ const formFields = [
label: 'Wrap Around',
path: 'wrapAround',
},
+ {
+ type: 'checkbox',
+ label: 'Jump to slide on focus',
+ path: 'focusInJumpToSlide',
+ }
],
},
{
diff --git a/src/components/Carousel/carouselProps.ts b/src/components/Carousel/carouselProps.ts
index 9c1050bc..5995b773 100644
--- a/src/components/Carousel/carouselProps.ts
+++ b/src/components/Carousel/carouselProps.ts
@@ -70,6 +70,10 @@ export const carouselProps = {
default: DEFAULT_CONFIG.enabled,
type: Boolean,
},
+ focusInJumpToSlide: {
+ default: DEFAULT_CONFIG.focusInJumpToSlide,
+ type: Boolean,
+ },
// control the gap between slides
gap: {
default: DEFAULT_CONFIG.gap,
diff --git a/src/components/Slide/Slide.ts b/src/components/Slide/Slide.ts
index 71be329f..b4d1c20c 100644
--- a/src/components/Slide/Slide.ts
+++ b/src/components/Slide/Slide.ts
@@ -127,6 +127,11 @@ export const Slide = defineComponent({
'carousel__slide--sliding': carousel.isSliding,
},
onFocusin: () => {
+ // eslint-disable-next-line no-debugger
+ debugger;
+ // if (!carousel.config.focusInJumpToSlide) {
+ // return
+ // }
// Prevent the viewport being scrolled by the focus
if (carousel.viewport) {
carousel.viewport.scrollLeft = 0
diff --git a/src/shared/constants.ts b/src/shared/constants.ts
index 265e43a1..1d8c3892 100644
--- a/src/shared/constants.ts
+++ b/src/shared/constants.ts
@@ -54,6 +54,7 @@ export const DEFAULT_CONFIG: CarouselConfig = {
breakpoints: undefined,
dir: DIR_OPTIONS[0],
enabled: true,
+ focusInJumpToSlide: true,
gap: 0,
height: 'auto',
i18n: I18N_DEFAULT_CONFIG,
diff --git a/src/shared/types.ts b/src/shared/types.ts
index 290b1de6..5370b458 100644
--- a/src/shared/types.ts
+++ b/src/shared/types.ts
@@ -43,6 +43,7 @@ export type CarouselConfig = {
clamp?: boolean
dir?: Dir
enabled: boolean
+ focusInJumpToSlide?: boolean
gap: number
height: string | number
i18n: { [key in I18nKeys]?: string }