Skip to content

feat(VCarousel): add stopOnHover prop to pause cycling on hover#22739

Open
mixelburg wants to merge 2 commits intovuetifyjs:masterfrom
mixelburg:feat/vcarousel-stop-on-hover
Open

feat(VCarousel): add stopOnHover prop to pause cycling on hover#22739
mixelburg wants to merge 2 commits intovuetifyjs:masterfrom
mixelburg:feat/vcarousel-stop-on-hover

Conversation

@mixelburg
Copy link
Copy Markdown
Contributor

Fixes #10544

Adds a stop-on-hover prop to VCarousel. When set alongside cycle, the auto-cycling pauses while the user hovers over the carousel and resumes when they move away.

The implementation adds an isHovered ref and onMouseenter/onMouseleave handlers on the root VWindow. The handlers are no-ops unless stopOnHover is true, so there's no runtime cost for the default case. The startTimeout guard also checks isHovered.value so a programmatic restart (e.g. slide change) won't queue the next tick while hovering.

Usage:

<v-carousel cycle :interval="3000" stop-on-hover>
  <v-carousel-item v-for="item in items" :key="item.src" :src="item.src" />
</v-carousel>

@J-Sek
Copy link
Copy Markdown
Contributor

J-Sek commented Mar 20, 2026

new prop qualifies this for dev branch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add mouse hover to stop cycle(change of slide) in carousel.

2 participants