How not to scroll while swiping carousel?

[schosdas]

Hello

I'd like to ask about the carousel swipe and scroll.
I made a carousel similar to the picture below. Everything else is fine, but there is a problem that it looks strange because the Y-axis scroll can also move when swiping sideways on the mobile.
I want to block the scrolling of the web while I'm swiping, is there a way?

Thank you.

Vue.js code (with bootstrap 5)

<div class="container-fluid pe-0 pb-1 ps-sm-0 px-md-2 mt-0">
        <Carousel
          class="px-0 px-md-3"
          :settings="settings"
          :breakpoints="breakpoints"
        >
          <Slide v-for="(data, index) in clubModel" :key="index">
            <PostCard :clubModel="clubModel[index]"></PostCard>
          </Slide>

          <template #addons>
            <Navigation v-if="width >= 768" />
          </template>
        </Carousel>
      </div>

export default defineComponent({
  name: "Breakpoints",
  components: {
    Carousel,
    Slide,
    Navigation,
    PostCard,
  },

  data: () => ({
    width: 0,

    // carousel settings
    settings: {
      itemsToShow: 2,
      snapAlign: "start",
    },
    breakpoints: {
      768: {
        itemsToShow: 4,
        snapAlign: "center",
      },
    },
  }),

});