Touch Scroll past carousel

[ChantalDelachevrotiere]

Describe the bug When a user is in mobile and using touch to navigate the page and the user scrolls to a carousel they can only scroll up or down the page by swiping vertically outside of the carousel. This becomes difficult if the carousel takes up the majority of the screen. Users should be able to swipe vertically on the carousel to navigate vertically.

To Reproduce

1. have screen in mobile view or use on mobile device
2. scroll to carousel on screen
3. try to swipe vertically on carousel to move past carousel
4. Screen does not move vertically

Expected behavior Like other carousels, I would expect the ability to scroll the page vertically on the carousel

Screenshots Screenshot would not be beneficial here, I apologize

Desktop (please complete the following information):

• OS: WSL2
• Browser: Tested on Firefox and Chrome
• Version: Unknown

Smartphone (please complete the following information):

• Device: Galaxy S20 5G
• OS: Android
• Browser Chrome
• Version Android 13

Additional context Love the carousel so far, thank you!

[ChantalDelachevrotiere]

wanted to add that I have updated to v 0.2.14 as I noticed there were some updates around touch and the issue persists

[ismail9k]

For your case, you can overwrite the carousel touch-action style:

.carousel__track {
    touch-action: auto;
}

[ChantalDelachevrotiere]

This worked if I directly altered it in the browser (thank you), but when I added the css it did not do anything. I have not had much luck at all for altering the css. How I am importing the files in my script:

import 'vue3-carousel/dist/carousel.css'
import { Carousel, Slide, Pagination, Navigation } from 'vue3-carousel'

My style:

<style lang="scss" scoped>
.carousel__track {
    touch-action: auto;
}
</style>

[ChantalDelachevrotiere]

This works just fine

.carousel {
    background-color: blueviolet;
}

Also, just some background, I am using Nuxt 3.

[ChantalDelachevrotiere]

This was never resolved, the suggested css edit did not work

[dixhuit]

Try the CSS fix but without the scoped attribute in the style tag.

[alphayowakarindi]

I'm using Laravel and Vue in the same repo. Applying touch-action: auto; in my component or my main CSS in Laravel did not work.

What worked for me: I had to use the section's Id that contains the carousel and place the code in my main CSS in Laravel, public/css/style.css.

#property-listings .carousel__track {
    touch-action: auto;
}