Skip to content

feat(VCarousel): add wheel navigation#22906

Open
mahsarajabpour wants to merge 11 commits into
vuetifyjs:devfrom
mahsarajabpour:feat/carousel-wheel-navigation
Open

feat(VCarousel): add wheel navigation#22906
mahsarajabpour wants to merge 11 commits into
vuetifyjs:devfrom
mahsarajabpour:feat/carousel-wheel-navigation

Conversation

@mahsarajabpour

@mahsarajabpour mahsarajabpour commented Jun 7, 2026

Copy link
Copy Markdown
Contributor

Description

Adds mouse wheel navigation support for VCarousel.

Wheel handling is implemented as an opt-in wheel prop on VWindow. VCarousel can use it, but it is not enabled by default. The handler respects direction, so horizontal carousels react to horizontal wheel input and vertical carousels react to vertical wheel input. It also prevents repeated slide jumps during a continuous wheel gesture.

Wheel handling follows the intent of the older Vuetify 0 fix, but uses gesture locking to avoid repeated jumps on modern trackpads.

Fixes #22893

Markup

<template>
  <v-app theme="dark">
    <v-container max-width="600">
      <div class="mb-1 mt-6">
        <v-code class="bg-purple-darken-2">default, slower</v-code>
      </div>
      <div class="my-1 reduced-motion-info">
        <v-code class="bg-red">duration change suppressed - prefers-reduced-motion: reduce</v-code>
      </div>
      <v-carousel height="200" transition-duration="600">
        <v-carousel-item v-for="(src, i) in items" :key="i" :src="src" cover />
      </v-carousel>

      <div class="mb-1 mt-6">
        <v-code class="bg-purple-darken-2">opt-in wheel</v-code>
      </div>
      <v-carousel height="200" wheel>
        <v-carousel-item v-for="(src, i) in items" :key="i" :src="src" cover />
      </v-carousel>

      <div class="mb-1 mt-6">
        <v-code class="bg-purple-darken-2">vertical wheel</v-code>
      </div>
      <v-carousel height="200" direction="vertical" wheel vertical-delimiters="right">
        <v-carousel-item v-for="(src, i) in items" :key="i" :src="src" cover />
      </v-carousel>
    </v-container>
  </v-app>
</template>

<script setup>
  const items = [
    'https://cdn.vuetifyjs.com/images/carousel/squirrel.jpg',
    'https://cdn.vuetifyjs.com/images/carousel/sky.jpg',
    'https://cdn.vuetifyjs.com/images/carousel/bird.jpg',
    'https://cdn.vuetifyjs.com/images/carousel/planet.jpg',
  ]
</script>

@J-Sek

This comment was marked as resolved.

@J-Sek

This comment was marked as resolved.

@mahsarajabpour mahsarajabpour changed the base branch from master to dev June 10, 2026 23:40
@mahsarajabpour

Copy link
Copy Markdown
Contributor Author
  • cannot be true by default
  • easily gets "stuck" when scrolling quickly. We had similar issue in v0, although Carousel there has completely different architecture. It was fixed by vuetifyjs/0#197
  • should recognize direction (vertical scroll should not affect slides that move horizontally)

I kept the intent of the older Vuetify 0 fix, but used gesture locking here because the simple throttle still bounced on modern trackpads in this playground.

@J-Sek J-Sek added T: feature A new feature C: VWindow labels Jun 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Add mouse wheel gesture support for navigation in v-carousel / v-window

2 participants